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>

Answer 2

如果我正确理解jquery ready函数ready，你应该能够实现你想要的。

＆＃34;传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置＆＃34;

另一方面load，

＆＃34;如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则代码应放在load事件的处理程序中。＆＃34;

所以根据文档准备好在加载图像之前调用，但如果你可以阻止下载和更改图像路径只能测试答案。

Answer 3

您可以这样做，但不能可靠，如果您想输出有效的标记，则不能将src留空，这样可能会损害移动性能，而不是帮助。

不是重新发明轮子，而是有许多客户端和服务器端方法可以做到这一点，而不依赖于JS（你无法保证将启用它）。所有这些都更可靠，并且符合标准（例如CSS媒体目标），这将为您提供更好的结果。

Answer 4

简单的解决方案，无论如何都不过分优雅。调用您的函数以使用onload事件更改图像的来源。

<img id="YourID" src="PathToFirstImage" onload="YourFunction()">

虽然只要观看浏览器的播放速度非常慢，但只要观看浏览器不会看到原始图像，就会在图像加载后更改图像。

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

4 个答案: