是否可以在图像开始加载之前运行 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 必须可供脚本修改。 jQuery 就绪事件在 DOM 可用之后触发，因此浏览器已经开始请求 HTML 中引用的资源。

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

或者，将 src 放在图像上的不同属性中（例如 data_orig_src），然后运行脚本将 src 设置为 data_orig_src<文档准备好后，在每个图像上添加 /code>。在更改 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 = $('<img />').attr('src', 'imageURL.jpg');
image.appendTo('domElement');

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