不要加载隐藏的图像

Question

我的网站上有一堆隐藏图像。他们的容器DIV具有style =“
display：none”。根据用户的操作，某些图像可能会通过javascript显示。问题是打开页面时我的所有图像都被加载了。我想通过仅加载最终变得可见的图像来减轻服务器的负担。我想知道是否有一种纯CSS方式来做到这一点。这是我目前正在使用的两种hacky
/复杂方法。如您所见，这不是干净的代码。

<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

这是一个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之后运行此代码。