javascript - 使用 JS，是否可以阻止加载 HTML 中静态定义的图像？

Question

所以我有一个手工编码的单页网站，长度很长，有几十张图片。让我们跳过关于这是否是一个好策略的讨论，但情况是尽可能快地渲染所有这些图像会减慢用户体验，特别是如果他试图在所有重图像之前滚动或与页面交互 Assets 已加载。

理想情况下，我希望延迟 Assets 的加载，直到用户位于加载图像的部分顶部或非常接近它。

所以，如果一切都已经静态地存在，即:

<img src="images/photo.jpg" alt="Photo" />

是否有可能并且总是成功地做如下事情:

$(document).ready(function(){
  $("img").each(function(){
        $(this).attr("data-src", $(this).attr('src'));
        $(this).attr("src", ''); 
  })
})

IIRC，通过将 display 设置为 none 来简单地使用 css 隐藏所有 img 元素不会阻止它们在后台加载。而且我不确定 document.ready 回调是否会在呈现任何 Assets 之前执行。

或者我应该说，搞砸禁用 JS 的客户端并使用 ajax 和 json 加载 Assets ？

Answer 1

document.ready 是在 DOM 中的所有内容之后。图片是之前加载的，如果我知道的话。

为什么你不能这样做呢？

<img data-src="yourimage.png" class="img_i_need" />

如果你需要它，使用

$(function() {
    $("div").click(function() {
        $(".img_i_need").each(function() {
            $(this).attr('src', $(this).attr('data-src'));
        });
    });
});

http://jsfiddle.net/genesis/nDq82/3/