javascript - 有没有办法让图像显示在:none not get downloaded by the browser?内

Question

我希望浏览器(尤其是移动 webkit)不要下载 display:none div 内的图像。现在，它们被下载但未渲染。

有 jquery 插件可以做到这一点吗？

Answer 1

您可以使用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');