jquery 延迟加载

发布于 2024-12-04 23:04:14 字数 972 浏览 2 评论 0原文

我正在尝试创建一个 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 图像，但不显示原始图像。我缺少什么吗？

感谢您的帮助杰森

原文

Im trying to create a div that will use jquery's lazy load to load images coming in from linkedIn. When I look at the examples found online, they seem to work fine with my browser, but when i try to add it, it doesnt seem to work. I'm not sure if it matters, but i'm developing in Groovy/grails. here is the code i have so far, before rendering:

  <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>

This code will only draw the div and display the /mgr/images/spinner.gif image but not the original image. Is there something i'm missing?

thanks for your help
jason

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彩扇题诗 2024-12-11 23:04:14

通常，您在 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 的每次更新都会带来性能增强。

来自 Google CDN 的 jQuery 1.6.4。

来自 jQuery CDN 的 jQuery 1.6.4。

Normally you include the plugin file after the jQuery core file. That way the plugin can extend the jQuery core.

Change:

  <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>

To:

  <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>

I would also recommend trying to use the newest jQuery core file you can. It may break old plugins but it's well worth attempting as with each update to jQuery come performance enhancements.

jQuery 1.6.4 from Google CDN.

jQuery 1.6.4 from jQuery's CDN.

回复收藏 0 原文

眼中杀气 2024-12-11 23:04:14

另外，如果您想使用延迟加载插件加载一些 html，而不仅仅是图像，您可以在延迟回调上轻松做到这一点
这个选项“enableThrottle：false”是为了确保您的回调始终执行，因此我遇到了一些问题...有时延迟加载不起作用..

在html中添加“class =“lazy”data-src =” " 到section/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');
>       }
>     });

Also if you want to load some html not just for images using lazy loading plugin you can do easy like that on lazy callbacks
this option "enableThrottle: false", is to ensure your callback is always executed, I had some issues because of this ... sometimes lazy loading wasn't working..

to html add "class="lazy" data-src=" " to an element to section/div/img to call when is displayed to add new 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');
>       }
>     });

回复收藏 0 原文

~没有更多了~