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

【问题标题】：Don't load images within hidden elements不要在隐藏元素中加载图像
【发布时间】：2015-10-13 23:58:00
【问题描述】：

这不是 this 的重复，因为它还使用了 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>中的图像？

【问题讨论】：

我相信将src 属性设置为"" 不会影响这一点。将属性保存到data-src 或其他内容后尝试删除整个属性？
无法阻止通过 JavaScript 下载图像源。您必须将src 属性留空，然后将其与另一个属性一起插入，但请改用data-srctmp。
$(document).ready(function() {...}); 中的代码总是会在 DOM 准备好之后执行（意味着在所有图像和内容都已加载之后）。所以不要使用ready。
Prevent images from loading的可能重复
@AbraarArique 但没有ready，您将无法访问任何元素。当图像完成加载时，将调度 load 事件，而不是 DOMContentLoaded (ready)。

标签： javascript jquery html css

【解决方案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"));
       });
    });
  });

【讨论】：

这看起来很有希望。如果可行，我将尝试并选择它作为解决方案。感谢您的宝贵时间。