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

Question

我一直在研究可以更改图像 src 的 Javascript。我只是想知道这是否可以在浏览器尝试获取原始图像之前完成。

例子。

Src="Large-Image"

我可以(使用 javascript，我想……也许是 node.JS？)为用户服务 src="smaller-image"？

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

Answer 1

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

但是，我见过一些解决方案，您不在“src”属性上设置 url，而是在另一个属性名称上设置 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>