Question

我试图创建一个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图像，但不显示原始图像。有什么我想念的吗？

感谢您的帮助杰森

Answer 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

Answer 2

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

jquery懒惰负载

2 个答案: