不要在隐藏元素中加载图像

Question

这是不是重复的这个,因为它也使用document.ready这显然是行不通的做法.

我想避免浏览器加载<img>嵌套在隐藏<div>元素中的images().

所以我尝试了这个,但是javascript执行得太迟了,浏览器已经开始下载不应该的图像了.

  $(document).ready(function() {
    $('div').not(":visible").each(function () {
       $(this).find('img').each(function() {
         $(this).attr("src","");
       });
    });
  });

有一个很好的JavaScript解决方案吗？还是我使用<img srctmp="...."/>,然后替换srctmp由src通过JavaScript对于不嵌套在一个隐藏的这些图片<div>？

Answer 1

您可以使用data属性来代替src，浏览器仅加载图像形式src，因此您可以从data-src每个图像开始，然后src仅将其添加到可见图像中。

HTML：

  <img data-src="path/to/image.jpg" />

JS：

  $(document).ready(function() {
    $('div').is(":visible").each(function () {
       $(this).find('img').each(function() {
         $(this).attr("src", $(this).data("src"));
       });
    });
  });