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

Question

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

我想避免浏览器加载嵌套在隐藏的<div>元素中的图像（ <img> ）。

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

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

有一个很好的JavaScript解决方案吗？ 或者我是否必须使用<img srctmp="...."/>然后通过javascript将srctmp替换为src ，以便那些未嵌套在隐藏的<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"));
       });
    });
  });