我想在浏览器请求之前更改图像的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" />');
});
});
但原始的未定影的图像仍然在后台下载到浏览器的缓存.在客户端可以做我想要做的事情,还是服务器端的唯一选择？
解决方法
JavaScript加载和执行由浏览器序列化(除非您使用像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？
