是否可以防止(使用 jQuery)某些图像被移动设备加载?已经有 jQuery 插件了吗?
例如:我希望所有具有“太大”类的图像都不会被移动设备加载。
谢谢你的耐心。
是否可以防止(使用 jQuery)某些图像被移动设备加载?已经有 jQuery 插件了吗?
例如:我希望所有具有“太大”类的图像都不会被移动设备加载。
谢谢你的耐心。
我认为没有办法阻止它们加载,但您可以简单地更改这些元素的属性以更改浏览器尝试加载的内容:
$('img.toobig')
.attr({'width' : 0, 'height' : 0, 'src' : 'path/to/small/image.png'})
.hide();
上面找到了相关的图像,给它们一个height
and width
of 0
(所以布局引擎可以快速流动/重排文档,并给出一个src
to,理想情况下,一个小的透明图像文件。当然removeAttr('src')
,如果你愿意,你可以简单地。
最后的调用hide()
只是为了确保即使大小为0
,图像也无法在文档中显示。在这种情况下remove()
,当然可以改为使用。
这是可能的,但我建议仅在您知道它不是这样的移动设备时才加载它们:
$('.toobig').each(function(){
$(this).replaceWith('<img src="'+$(this).data('src')+'" />');
});
您有类似 span 的东西来表示您不想在移动设备上加载的图像,其数据属性为“src”,如下所示:
<span class="toobig" data-src="/your/location/image.jpg"></span>
您可以扩展它以添加诸如替代文本之类的内容,等等。