不要加载隐藏的图像

Question

我的网站上有一堆隐藏的图片.他们的容器DIV有style ="display:none".根据用户的操作,可以通过javascript显示一些图像.问题是打开页面时我的所有图像都被加载了.我想通过加载最终变得可见的图像来减轻服务器上的压力.我想知道是否有纯CSS方式来做到这一点.这是我目前正在做的两种hacky/complex方式.如您所见,它不是干净的代码.

<div id="hiddenDiv">
   <img src="spacer.gif" />
</div>

.reveal .img {
 background-image: url(flower.png);
}

$('hiddenDiv').addClassName('reveal');

这是方法2:

<img id="flower" fakeSrc="flower.png" />

function revealImage(id) {
 $('id').writeAttribute(
  'src',
  $('id').readAttribute('fakeSrc')
 );
}

revealImage('flower');

Answer 1

浏览器将加载具有src属性集的任何图像,因此您要做的是data-src在标记中使用并使用JavaScript src在您希望加载时设置属性.

<img class="hidden" data-src="url/to/image.jpg" />

我创建了这个小插件来解决这个问题:

(function($){
    // Bind the function to global jQuery object.
    $.fn.reveal = function(){
        // Arguments is a variable which is available within all functions
        // and returns an object which holds the arguments passed.
        // It is not really an array, so by calling Array.prototype
        // he is actually casting it into an array.
        var args = Array.prototype.slice.call(arguments);

        // For each elements that matches the selector:
        return this.each(function(){
            // this is the dom element, so encapsulate the element with jQuery.
            var img = $(this),
                src = img.data("src");

            // If there is a data-src attribute, set the attribute
            // src to make load the image and bind an onload event.
            src && img.attr("src", src).load(function(){
                // Call the first argument passed (like fadeIn, slideIn, default is 'show').
                // This piece is like doing img.fadeIn(1000) but in a more dynamic way.
                img[args[0]||"show"].apply(img, args.splice(1));
            });
        });
    }
}(jQuery));

.reveal对要加载/显示的图像执行:

$("img.hidden").reveal("fadeIn", 1000);

请参阅jsFiddle上的测试用例.

Answer 2

这是一个jQuery解决方案:

$(function () {
   $("img").not(":visible").each(function () {
       $(this).data("src", this.src);
       this.src = "";
   });

   var reveal = function (selector) {
       var img = $(selector);
       img[0].src = img.data("src");
   }
});

它与您的解决方案类似,只是它不使用fakeSrc标记中的属性.它会清除该src属性以阻止其加载并将其存储在其他位置.一旦准备好显示图像,就可以reveal像在解决方案中一样使用该功能.如果你不使用jQuery我很抱歉,但是这个过程应该可以转移到你使用的任何框架(如果有的话).

注意:此代码必须在窗口触发load事件之前运行,但在加载DOM之后.

Answer 3

奇怪的是，对于已经在大多数浏览器中实现的本机延迟加载没有答案。

您可以通过loading="lazy"向图像添加属性来做到这一点。

Addy Osmani 写了一篇关于它的精彩文章。您可以在这里阅读有关延迟加载的更多信息：https ://addyosmani.com/blog/lazy-loading/