Jquery懶加載不能正常工作

我想實現一個稱爲延遲加載的jQuery技術。我試圖實現的目標是我希望頁面加載時不等待所有的圖像請求，所以我希望頁面首先加載CSS等，並讓圖像加載速度緩慢。Jquery懶加載不能正常工作

我在這裏面臨的問題是，它在加載頁面之前等待所有圖像請求，這與延遲加載的概念相反。有人能幫我嗎？

<html> 
    <head> 
     <link rel="stylesheet" href="css/float.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
     <script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script> 
     <script> 
      <script type="text/javascript"> 
       jQuery(document).ready(function($) { 
        $(function(){ 
         $("img.lazy").lazyload(); 
        }); 
       }); 
      </script> 
    </head> 
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/> 
<br> 
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" width="400" height ="400"/> 
<br> 
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" width="400" height ="400"/> 
<br> 
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8199/8219175940_effa3f66ca_m.jpg" width="400" height ="400"/> 
<br> 
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8490/8215600456_de252d155d_m.jpg" width="400" height ="400"/> 
<br>

來源

2013-06-01 JackRoster

你不使用插件正常。閱讀documentation，您應該將圖片的網址放在data-original屬性中。 src屬性應該包含用於所有項目的虛擬圖像的URL，直到它們加載實際圖像。

<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>

此外，正如其他答案指出的那樣，您需要從文檔就緒處理程序中調用插件。

jQuery(document).ready(function ($) { 
    $("img.lazy").lazyload(
     { data_attribute: "orig" 
     }); 
});

的data_attribute選項告訴插件什麼data-XXX屬性找到真正的URL，它默認爲data-original，上面的選項就變爲data-orig匹配錯誤的HTML我給你。

來源

2013-06-01 03:19:17 Barmar

+1這是正確的... – PSL

您在'src'和'data-original'中有相同的URL，是嗎？這是錯誤的。 – Barmar

所有的圖像應該指向相同的'src'，它應該是一個用作佔位符的簡單圖像。這允許它們快速加載，因爲它是第一次被緩存。 – Barmar

將腳本包裝到onload函數中，以便在加載頁面之前不會執行腳本。

$(function() { 
    $("img.lazy").lazyload(); 
});

來源

2013-06-01 03:13:41 Fallexe

將腳本放在document.ready下。因此，您的$("img.lazy")在文檔加載後以及DOM圖像標籤可用時執行。

$(function(){ 
    $("img.lazy").lazyload(); 
});

，你可以發現這一點最簡單的方法是將警報或執行console.log之前$("img.lazy").lazyload();即

<script> 
console.log($("img.lazy").length); // this will log 0 
$("img.lazy").lazyload(); 
</script>

來源

2013-06-01 03:13:44 PSL

PSL你的意思是這樣 – JackRoster

Jquery懶加載不能正常工作

回答

相關問題