Question

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

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

所以，如果一切都已经静止，即：

<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回调是否会执行。

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

Answer 1

永远不要因为任何原因而禁用JS禁用的客户端。

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

Answer 2

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/

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

2 个答案: