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

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

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

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

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

IIRC，仅仅通过将display设置为none来隐藏所有带有css的img元素并不能阻止它们在后台加载。我不确定document.ready回调是否会在呈现任何资产之前执行

---

或者我应该说，使用ajax和json来处理禁用JS的客户端并加载资产？

无论出于何种原因，都不要处理禁用JS的客户端

---

也就是说，读了你的问题，我也想到了你的想法。不知道它是否有效。

document.ready是在DOM中的所有内容都完成之后。如果我知道的话，图像在加载之前就已经加载了

你为什么不能这样做

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

---

我在网站中使用AJAX，但我使用它从物理网页获取内容，只获取所需的内容。因此，如果你没有启用JS，你仍然可以打开整个页面。那么你建议即使是Facebook这样的网站也应该不使用JS？当然，每个网站都是不同的。我只是说：AJAX对web应用程序来说是一个巨大的改进，但它必须是一种给用户更丰富（希望更好）的导航体验的方法，而不是成为一个可访问性问题。像facebook这样的网站严重依赖JS，而实际上在facebook上导航的用户无论如何都会启用JS，因为他们想要所有这些新奇的东西。对于一个必须向用户显示内容的普通网站来说，AJAX应该是一个优势，而不是导航网站所必需的。对于普通的非jJS客户端，没有任何方法。。可能

img src=“…”

对于非JS客户端，将带有src的图像标记放在标记内。

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