懶加載不工作，不顯示圖像？

我想在延遲加載效果中使用淡入淡出效果。雖然我遵循了所有的指示，但仍然沒有出現圖像！任何人都可以幫助更多嗎？代碼：懶加載不工作，不顯示圖像？

<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script> 
</head> 

<body> 
<div class="collateral-body-image"> 
    <img class="lazy" data-original="images/vivid-collateral.jpg" width="1920" height="594"> 
</div> 


<script type="text/javascript"> 
$(function(){ 
    $("img.lazy").lazyload({ 
    effect: "fadeIn" 
    }); 
}); 

</script> 

</body>

來源

2015-06-21 Henry Brown

你驗證jQuery和lazyload鏈接？這可能是一個簡單的錯誤的url問題... – Banana

我如何驗證他們？ –

或者打開您的瀏覽器的開發控制檯，然後轉到源代碼並查看文件是否正確加載，或者將url複製並粘貼到您的地址欄並將它們追加到當前路徑（例如：如果您的網站位於** www.mysite。 com/myproject/example.html **，那麼你在你的代碼片段中發佈的鏈接應該位於** www.mysite.com/myproject/jquery.js **和lazyload相同）。並查看文件是否在瀏覽器中打開。 – Banana

如果你想讓它運行只是使用CDN網址加載它。稍後，您可以在本地下載此腳本，並使用localhost上的本地Web服務器提供此腳本。

快速到運行代碼，

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> 
</head> 
<body> 

    <div class="collateral-body-image"> 
     <img class="lazy" data-original="http://montanasteele.com/wp-content/uploads/gallery/vivid-condos/vivid-collateral-02.jpg" width="800" height="800"> 
    </div> 

<script> 
    $(function(){ 
     $("img.lazy").lazyload({ 
      effect: "fadeIn" 
     }); 
    }); 
</script>

來源

2015-06-21 12:51:58 kishanio

這就是我所做的，謝謝！ –

懶加載不工作，不顯示圖像？

回答

相關問題