Javascript 通过 id 延迟加载图像答案

【问题标题】：Javascript lazy load images by idJavascript 通过 id 延迟加载图像
【发布时间】：2014-07-09 02:49:35
【问题描述】：

我有一个包含很长图像列表的页面，我希望延迟加载它们。但是，当图像出现在视口中时，我不想加载它们，而是在页面准备好时按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。我将如何做同样的事情，但在加载时按id 的顺序而不是在它们出现在视口中时执行？

【问题讨论】：

所以图像的加载与是否在视口中无关？您希望图像根据 id 按顺序加载（即每个图像仅在完成之前的图像之后开始加载）？
@Lebowski156 是的，完全正确。

标签： javascript jquery lazy-loading

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 原因，您可以使用任何其他占位符元素。

【讨论】：