jquery - 如何在我的简单自定义图库中动态加载图像或仅加载第一张图像？

Question

在这个图片库中，如果有很多图片，浏览器会加载所有图片。如何让浏览器只加载每个画廊的第一个图像，只有当用户点击分页数字时才加载其他图像？这是我的代码:

 <div class="photPag">
 <ul class="previewPhoto">
    <li style="display:block;"><a href="/bigImage/1.jpg" data-rel="gallery1">
      <img src="/smallImage/1.jpg" height="200" width="150" alt="" /></a></li>
    <li><a href="/bigImage/2.jpg" data-rel="gallery1">
      <img src="/smallImage/2.jpg" height="200" width="150" alt="" /></a></li>
    <li><a href="/bigImage/3.jpg" data-rel="gallery1">
      <img src="/smallImage/3.jpg" height="200" width="150" alt="" /></a></li>
 </ul>
 <ul class="pages">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>                      
 </ul>
</div>

jQuery(".pages li").click (
      function(){
        if  (!jQuery(this).hasClass('active'))
        {
            var anker=jQuery(this).text() -1;
            jQuery(this).parent().find('li').removeClass('active');
            jQuery(this).addClass('active');
            jQuery(this).parent().prev().find('li').css('display','none');
            jQuery(this).parent().prev().find('li').eq(anker).css('display','block');
        }

});

Answer 1

您需要阅读有关延迟加载的内容。这是最简单的实现方式:

lazyLoad = function() {
    var img = galleryContainer.find("img:visible");
    if (!img.data("shown")) {
        var dataSrc = img.data("src");
        img.attr("src", dataSrc);
        img.data("shown", true);
    }
}

这是工作演示(非常丑陋，但仅用于演示目的)。 http://jsfiddle.net/qns1ap60/

简而言之: 1. 添加一些“loading”图像作为图库中每个图像标签的“src”属性。 2. 在“data-src”属性中存储真正的“src”。 3. 在图像更改时调用 lazyLoad 函数，这会将“data-src”属性值添加到“src”一，这将强制浏览器加载真实图像。

我认为，您应该为此考虑一些通用解决方案，甚至是一个众所周知且经过测试的插件，例如 Unveil