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

Question

这不重复 this因为它还使用了 document.ready显然行不通的方法。

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

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

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

是否有好的 javascript 解决方案？或者我必须使用 <img srctmp="...."/>然后替换 srctmp通过 src对于那些未嵌套在隐藏 <div> 中的图像，通过 javascript ？

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"));
       });
    });
  });