jquery - 有机会禁用图片加载

Question

是否可以防止（使用 jQuery）某些图像被移动设备加载？已经有 jQuery 插件了吗？

例如：我希望所有具有“太大”类的图像都不会被移动设备加载。

谢谢你的耐心。

Answer 1

我认为没有办法阻止它们加载，但您可以简单地更改这些元素的属性以更改浏览器尝试加载的内容：

$('img.toobig')
    .attr({'width' : 0, 'height' : 0, 'src' : 'path/to/small/image.png'})
    .hide();

上面找到了相关的图像，给它们一个heightand widthof 0（所以布局引擎可以快速流动/重排文档，并给出一个srcto，理想情况下，一个小的透明图像文件。当然removeAttr('src')，如果你愿意，你可以简单地。

最后的调用hide()只是为了确保即使大小为0，图像也无法在文档中显示。在这种情况下remove()，当然可以改为使用。

Answer 2

这是可能的，但我建议仅在您知道它不是这样的移动设备时才加载它们：

$('.toobig').each(function(){
    $(this).replaceWith('<img src="'+$(this).data('src')+'" />');
});

您有类似 span 的东西来表示您不想在移动设备上加载的图像，其数据属性为“src”，如下所示：

<span class="toobig" data-src="/your/location/image.jpg"></span>

您可以扩展它以添加诸如替代文本之类的内容，等等。