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

现在，当图片进入视口时，我使用this plugin将src替换为data-src，只是使用{{3}}延迟加载图片。我将如何做同样的事情，但按照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原因，您可以使用任何其他占位符元素。

Javascript懒惰加载id的图像

3 个答案: