Javascript按ID懶加載圖像

Question

我的頁面上有很長的圖像列表，我希望延遲加載它們。 但是，當頁面准備好時，我想按id順序加載它們，而不是加載它們在視口中出現的圖像。 有什么辦法嗎？

這是我的標記。 我的目標是按順序加載realimg1，realimg2，realimg3等。

<img src="loading.png" width="300" height="200" id="id1" data-src="realimg1.png">
<img src="loading.png" width="300" height="200" id="id2" data-src="realimg2.png">
<img src="loading.png" width="300" height="200" id="id3" data-src="realimg3.png">
<img src="loading.png" width="300" height="200" id="id4" data-src="realimg4.png">
<img src="loading.png" width="300" height="200" id="id5" data-src="realimg5.png">

現在，我正在使用此插件通過在圖像進入視口時用data-src替換src延遲加載圖像。 我將如何做同樣的事情，但id順序加載而不是在視口中出現時按順序執行？

Answer 1

我認為您不會發現延遲加載有任何用處，因為它的功能完全針對基於視口中顯示的圖像進行加載。

看一下這個：

---

嗨，您可能對此演示感興趣

http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html

相應的教程在這里：

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/

它使用一個名為jQuery插件：

<script type="text/javascript">

$(function(){

    $("#gallery").preloader();

    });

</script>

哪里

<ul id="gallery" class="clearfix">

        <li><p><a href="#"><img src="images/1.jpg" /></a></p></li>

        <li><p><a href="#"><img src="images/2.jpg" /></a></p> </li>

        <li><p><a href="#"><img src="images/3.jpg" /></a></p> </li>

        <li><p><a href="#"><img src="images/4.jpg" /></a></p></li>

        <li><p><a href="#"><img src="images/5.jpg" /></a></p> </li>

    </ul>

來源： http : //wpquestions.com/question/showChrono/id/7959

Answer 2

<script>
    function lazyLoader(id){
        var images = document.getElementById(id).getElementsByTagName('img');
        for(prop in images){
            images[prop].setAttribute('src', images[prop].getAttribute('data-src')); 
        }
    }
    // should be called after document ready or load - 
    lazyLoader('lazy_loader');

</script>

Answer 3

您可以使用justlazy插件，以防止使用外部依賴項。 它可以按ID加載。 您只需要提供圖像即可加載。

對於圖像，可以按以下方式調用庫：

 var placeholders = document.querySelectorAll(".some-class-of-images-to-load"); for (var i = 0; i < placeholders.length; ++i) { Justlazy.lazyLoad(placeholders[i]); } 

占位符必須采用以下結構：

 <span data-src="default/image" data-alt="some alt text" class="some-class-of-images-to-load"> </span> 

出於SEO的原因，您可以使用任何其他占位符元素。