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

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

$（文档）.ready（函数（）{
var imgs=$（“#容器img”）；
每个（imgs，function（））{
$（此）。替换为（“”）；
});
});

---

但是原始的、未调整大小的图像仍然在后台下载到浏览器的缓存中。是否可以在客户端执行我试图执行的操作，或者服务器端是唯一的选项？

在加载DOM之前，您不能更改页面的DOM。而且，一旦加载DOM，浏览器就已经开始请求图像。因此，您根本无法更改

属性，您可以使用Javascript添加
.src
属性。在为
属性提供
.src
属性之前，不会显示该属性

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

如果您不能更改页面的源代码，那么您所能做的就是最初隐藏图像（使用CSS）直到在它们上设置了正确的
.src
，并且加载了新的
.src
值。
这是可能的，但不是以您当前拥有或可能想要的方式，并且不会优雅地降级，但是您可以从html中取出图像，并使用jQuery将其插入到html中，并应用您所做的任何更改我想要它

例如：

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

var image=$（'
但是这样做对我来说没有任何意义，因为我不知道你为什么不编辑图像源代码。
Javascript加载和执行是由浏览器序列化的（除非你使用类似
head.js的东西），但问题是DOM必须可用，脚本才能修改它。jQuery ready事件在DOM可用后激发，因此浏览器已经开始请求HTML中引用的资源

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

或者，将
src
放在图像的不同属性中（如
data\u orig\u src
）并在文档准备好后运行脚本，将每个图像上的
src
设置为
data\u orig\u src
。在更改
src
之前，使用CSS隐藏图像，这样用户就不会看到损坏的图像图标。我认为这可能比事后添加图像要好，因为您不需要跟踪图像需要保存的位置在DOM中添加，它的性能也应该更好

当然，如果您可以将服务器更改为使用
data\u orig\u src
而不是
src
，那么为什么不首先在标记中添加正确的
src
。
为什么不改为在生成它们的脚本中更改src呢？好的，听起来服务器端似乎是唯一的选择。谢谢。我能理解的唯一原因是如果您没有访问服务器代码的权限，或者出于任何原因修改服务器代码是非常痛苦的。一个有效的用例示例是在Webflow中实现背景图像延迟加载。请注意，这个答案已经有8年多的历史了，从那时起世界已经向前发展了。：-）我们目前使用lazysizes（）进行延迟图像加载。请注意隐藏图像，然后在事实发生后更改img.src，您可能会遇到一个问题，即旧图像在加载新图像时会短暂显示，因此您会得到一点“闪光”效果。最初隐藏图像的全部目的是旧图像不会显示。确切地说，但是如果使用css隐藏，jquery会更改属性，然后显示图像，它会在加载新图像时刷新旧图像。@HighwayofLife-我测试了Safari、IE9和Chrome，但没有看到flash。Firefox确实会闪现（多么虚假）。如果要防止Firefox中的flash，可以在加载新图像时显示（）。这里有一个演示：。