是否可以在图像开始加载之前运行javascript？

我想在浏览器请求之前更改图像的src属性，目的是使用像Timthumb这样的PHP脚本来减小图像的大小。 使用jQuery，我认为$(document).ready会做到这一点：

 $(document).ready(function () { var imgs = $('#container img'); jQuery.each(imgs, function() { $(this).replaceWith(''); }); }); 

但原始的，未显示的图像仍然在后台下载到浏览器的缓存中。 是否有可能在客户端做我想做的事情，或者服务器端是唯一的选择？

Answer 1

浏览器序列化Javascript加载和执行（除非你使用head.js类的head.js ），但问题是DOM必须可用于脚本来修改它。 在DOM可用之后 ，jQuery ready事件将触发，因此浏览器已经开始请求HTML中引用的资源。

因此，如果您将Javascript放在图像标记之前，它将无法找到图像标记，并且一旦准备就绪，则下载已经开始。 我不知道在图像加载之前会发生任何事件（只有一个用于中止），因此最干净的方法是首先使用修改后的src属性创建HTML。

或者，将src放在图像上的不同属性中（如data_orig_src ）并运行脚本，在文档就绪时将src设置为每个图像上的data_orig_src 。 在更改src之前使用CSS隐藏图像，以便用户看不到损坏的图像图标。 我认为这可能比在事后添加图像更好，因为您不需要跟踪图像需要放在DOM中的位置，它也应该表现得更好。

当然，如果您可以将服务器更改为使用data_orig_src而不是src ，那么为什么不首先将正确的src放在标签中…

Answer 2

在加载DOM之前，您无法更改页面的DOM。 并且，一旦加载了DOM，浏览器就已经开始请求图像了。 因此，您无法在开始加载图像之前更改标记。

您可以做的是将页面源更改为不想在页面源中更改任何图像，然后使用javascript在页面加载后动态插入所需图像。 这样浏览器永远不会请求错误的图像。

或者，您可以将标记更改为根本没有.src属性，并使用您的Javascript添加.src属性。 在您为其提供.src属性之前，不会显示没有.src属性的标记。

如果您在将图像更改为正确的图像之前担心错误的图像在加载时会闪烁，您可以在样式表中使用CSS来隐藏图像，然后在将img.src更改为正确的值之后新的.src值已加载，您可以使它们可见。

如果你无法改变页面的来源，那么你所能做的就是最初隐藏图像（使用CSS），直到在它们上面设置了正确的.src并且加载了新的.src值。

Answer 3

这有点可能，但不是你现在拥有或者可能想要的方式，它不会优雅地降级，但你可以从你的html中取出图像并使用jQuery将它插入你的html并应用你想要的任何改变。

例：

 var image = $('').attr('src', 'imageURL.jpg'); image.appendTo('domElement'); 

但是这样做对我来说没有任何意义，为什么你不会只是编辑图像源。