Fatal编程技术网

Jquery plugins jquery延迟加载

jquery-plugins jquery groovy

Jquery plugins jquery延迟加载,jquery-plugins,jquery,groovy,Jquery Plugins,Jquery,Groovy,我正在尝试创建一个div，它将使用jquery的延迟加载来加载来自linkedIn的图像。当我查看在线找到的示例时，它们似乎与我的浏览器配合良好，但当我尝试添加它时，它似乎不起作用。我不确定这是否重要，但我正在Groovy/grails中开发。以下是我到目前为止在渲染之前的代码： <html> <head> <script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyl

我正在尝试创建一个div，它将使用jquery的延迟加载来加载来自linkedIn的图像。当我查看在线找到的示例时，它们似乎与我的浏览器配合良好，但当我尝试添加它时，它似乎不起作用。我不确定这是否重要，但我正在Groovy/grails中开发。以下是我到目前为止在渲染之前的代码：

  <html>
  <head>
  <script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">  

  </script>     
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
   ....
  <script type="text/javascript">
  $("img").lazyload({
placeholder : "/mgr/images/spinner.gif" 
 });

 </script>
   ....
</head>
<body>
 <div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
 <g:each in="${Friends}" status="i" var="Friends">  
   <img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
   </div>


....
$（“img”）.lazyload({
占位符：“/mgr/images/spinner.gif”
});
....
此代码将仅绘制div并显示/mgr/images/spinner.gif图像，而不显示原始图像。有什么我遗漏的吗

谢谢你的帮助
jason

通常在jQuery核心文件之后包含插件文件。这样插件就可以扩展jQuery核心

更改：

  <script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">  

  </script>     
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
致：
我还建议您尽量使用最新的jQuery核心文件。它可能会破坏旧插件，但值得尝试，因为jQuery的每次更新都会带来性能增强

.

此外，如果您想加载一些html，而不仅仅是使用惰性加载插件加载图像，那么您可以在惰性回调上轻松地完成这项工作
这个选项“enableThrottle:false”是为了确保您的回调始终被执行，我因此遇到了一些问题。。。有时延迟加载不起作用

要添加html，请将“class=”lazy“data src=”“添加到要在显示时调用的/div/img节的元素中，以添加新的html

>  $('.lazy').Lazy({
>       chainable: false,
>       enableThrottle: false,
>       onFinishedAll: function () {
>        // do what you need ajax call or other 
>       },
>       beforeLoad: function () {
>            // do what you need ajax call or other 
>       },
>       afterLoad: function () {
>         // do what you need ajax call or other 
>       },
>       onError: function () {
>         console.log('could not be loaded');
>       }
>     });

>  $('.lazy').Lazy({
>       chainable: false,
>       enableThrottle: false,
>       onFinishedAll: function () {
>        // do what you need ajax call or other 
>       },
>       beforeLoad: function () {
>            // do what you need ajax call or other 
>       },
>       afterLoad: function () {
>         // do what you need ajax call or other 
>       },
>       onError: function () {
>         console.log('could not be loaded');
>       }
>     });