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

时间:2011-11-08 23:51:55

标签: javascript jquery document-ready

我希望在浏览器请求之前更改图像的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" />');
    });
});

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

4 个答案:

答案 0 :(得分:14)

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

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

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

当然,如果您可以将服务器更改为使用data_orig_src而不是src,那么为什么不首先在标记中添加正确的src ...

答案 1 :(得分:7)

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

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

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

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

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

答案 2 :(得分:0)

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

示例:

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

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

答案 3 :(得分:0)