是否可以在原始图像加载之前更改图像src =""

Question

我一直在寻找可以改变图像的src的Javascript.我只是想知道在浏览器尝试获取原始图像之前是否可以这样做.

例.

Src="Large-Image"

我可以(使用javascript,我会想象.. node.JS可能？)为用户服务src="smaller-image"？

显然,如果浏览器首先加载大图像,则不会有性能提升.

Answer 1

我不这么认为,JS需要image-tag才能访问属性,所以它必须晚于它执行(比如在documentReady上或者放在标签之后),但此时浏览器已经已经开始下载图像.

但是,我已经看到了一些解决方案,你没有在"src"属性上设置url,而是在另一个属性名称上设置,例如"data-src".您的Javascript可以动态地将该URL设置为"src"属性以提示浏览器开始下载.

例如(假设加载了jQuery):

<img data-src="http://www.url.nl/image.png" />

<script>
    $("img").each(function (index, element) {
       var $element = $(element);
       var imageUrl = $element.attr("data-src");

       //Do your checks here to change the image-url to a smaller one when required

       $element.attr("src", imageUrl);
    });        
</script>