2

我希望浏览器（尤其是移动 webkit）不下载display:nonediv 内的图像。现在，它们被下载而不是渲染。

有没有一个jQuery插件来做到这一点？

4

2 回答 2

3

你可以使用data-*属性。这样，您可以让 jQuery 按需加载它们：

<img data-source="image_path">

//this one gets all images and loads them
$('img').each(function(){
    //loads the source from data-source
    this.src = this.getAttribute('data-source');
});

<img data-source="image_path" class="foo">
<img data-source="image_path" class="foo">

//this one gets all images that have class foo and loads them
$('img.foo').each(function(){
    //loads the source from data-source
    this.src = this.getAttribute('data-source');
});

当然，您需要将其包装在一个函数中，以便您可以按需调用哪些图像。喜欢：

function loadImg(selector){
    $(selector).each(function(){
        this.src = this.getAttribute('data-source');
    });
}

//load images with class foo:
loadImg('.foo');
于 2012-04-04T01:59:16.907 回答
0

我不这么认为。可以肯定的是，您将需要您的原始 HTML DOM 来排除隐藏图像，您可以使用基于用户代理嗅探的服务器端编程来执行此操作（尽管不推荐这样做）。document.ready在或之后修改 DOMdocument.load意味着浏览器已经有机会从服务器请求资源，即使它们可能不会显示。

这将是不寻常的，但如果您仍想使用 jQuery，您可以遵循@Pointy 的建议并在您的标记中制作所有图像占位符。然后:visible使用属性作为数据源将占位符替换为您想要的图像。不需要插件，只需使用诸如replaceWith()或attr()之类的东西来替换您要下载的图像的占位符节点或更改src属性。

我会使用 1x1 透明 gif 作为具有正确高度和宽度属性的占位符，而不是没有<img>占位符的来源。这样，当页面呈现时，页面流将被正确确定，因此它不会在您的图像延迟加载时跳来跳去。

于 2012-04-04T02:08:08.253 回答