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

Posted 2023-03-06

【中文标题】不要在隐藏元素中加载图像

【英文标题】：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)。

【参考方案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"));
       );
    );
  );

【讨论】：

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