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.添加一些“加载”图像作为图库中每个图像标记的“src”属性。 2.将真实的“src”存储在“data-src”属性中。 3.在图像更改时调用lazyLoad函数，将“data-src”属性值添加到“src”中，这将强制浏览器加载实际图像。

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

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

1 个答案: