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

Question

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

$(document).ready(function () {
  var imgs = $('#container img');
  jQuery.each(imgs, function() {
    $(this).replaceWith('<img src="timthumb/timthumb.php?src=' + $(this).attr('src') + '&w=200" />');
    });
});

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

Answer 1

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

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

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

当然,如果你可以改变使用的服务器data_orig_src而不是src,为什么不把它放在src标签的第一位......

Answer 2

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

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

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

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

如果您无法更改页面的来源,那么您所能做的就是最初隐藏图像(使用CSS),直到.src在它们上设置了正确的图像并且.src已加载新值.