jquery延遲加載

我試圖創建一個div，將使用jquery的延遲加載來加載從linkedIn進來的圖像。當我看到在線發現的例子時，他們似乎對我的瀏覽器工作正常，但是當我嘗試添加它時，它似乎不起作用。我不確定它是否重要，但我正在開發Groovy/grails。這裏是我的代碼至今，呈現之前：jquery延遲加載

<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圖像而不是原始圖像。有什麼我失蹤？

感謝您的幫助傑森

來源

2011-09-13 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>

要：

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

來源

2011-09-13 20:35:02 Jasper

聽起來是正確的。 – Kzqai

此外，如果你想加載一些HTML不只是爲了使用延遲加載插件，您可以做一些簡單的像懶惰回調
此選項「enableThrottle：假」的圖像，是確保始終執行您的回調，我有一些問題，因爲這...有時延遲加載不起作用..

to html add「class =」lazy「data-src =」「to element to section/div/img to call when displayed添加新的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'); 
>  } 
>  });

來源

2017-08-25 16:00:24

jquery延遲加載

回答

相關問題