jquery懒惰负载

时间:2011-09-13 20:30:51

标签: jquery-plugins jquery groovy

我试图创建一个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>

此代码仅绘制div并显示/mgr/images/spinner.gif图像,但不显示原始图像。有什么我想念的吗?

感谢您的帮助 杰森

2 个答案:

答案 0 :(得分:1)

通常在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>

要:

  <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" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>

我还建议您尝试使用最新的jQuery核心文件。它可能会破坏旧的插件,但是值得尝试,因为每次更新jQuery都会带来性能增强。

jQuery 1.6.4 from Google CDN

jQuery 1.6.4 from jQuery's CDN

答案 1 :(得分:0)

此外,如果你想加载一些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');
>       }
>     });