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

Is it possible to run javascript before images begin loading?

提问by Toutouwai

I'd like to change the src attribute of images before they are requested by the browser, the aim being to reduce the size of the images using a PHP script like Timthumb. Using jQuery, I thought $(document).readywould do the trick:

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

But the original, unresized image is still downloaded in the background to the browser's cache. Is it possible to do what I'm trying to do on the client side, or is server-side the only option?

但是原始的、未调整大小的图像仍会在后台下载到浏览器的缓存中。是否可以在客户端做我想做的事情，还是服务器端是唯一的选择？

回答by Scott A

Javascript loading and execution is serialized by the browser (unless you use something like head.js), but the problem is that the DOM has to be available for a script to modify it. The jQuery ready event fires afterthe DOM is available, so the browser has already started requesting the resources that were referenced in the HTML.

Javascript 加载和执行由浏览器序列化（除非您使用类似head.js），但问题是 DOM 必须可供脚本使用才能修改它。jQuery 就绪事件在DOM 可用后触发，因此浏览器已经开始请求在 HTML 中引用的资源。

So if you put the Javascript before the image tag it won't be able to find the image tags, and once ready fires the download has already started. I'm not aware of any events that fire before image load (just one for aborts), so the cleanest method is to create the HTML with the modified srcattributes in the first place.

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

Alternatively, put the srcin a different attribute on the image (like data_orig_src) and run the script to set srcto data_orig_srcon each image upon document ready. Use CSS to hide the images before changing the srcso the user doesn't see a broken image icon. I think this is probably better than adding the images after the fact because you won't need to track where the images need to be placed in the DOM, and it should perform better as well.

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

Of course if you can change the server to use data_orig_srcinstead of src, why not just put the proper srcin the tag in the first place...

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

回答by jfriend00

You cannot change the DOM of the page before the DOM has been loaded. And, once the DOM has been loaded, the browser has already started requesting images. So, you cannot change <img>tags before they start loading their images.

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

What you could do is change the source of the page to not have any of the images you want to change in the source of the page and then use javascript to dynamically insert the desired images after the page has been loaded. This way the browser will never request the wrong images.

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

Or, you could change the <img>tags to not have a .srcproperty at all and with your Javascript you would add the .srcproperty. An <img>tag with no .srcproperty will not display until you provide it with a .srcproperty.

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

If you're worried about the wrong images flashing as they are loaded before you change them to the correct images, you can use CSS in a stylesheet to hide the images initially and then after you change the img.srcto the correct value and that new .srcvalue has loaded, you can make them visible.

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

If you can't change the source of the page, then all you can do is hide the images initially (using CSS) until the correct .srchas been set on them and that new .srcvalue has been loaded.

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

回答by George Reith

It is sort of possible but not in the way you currently have or probably want and it doesn't degrade gracefully but you can take the image out of your html and use jQuery to insert it into your html and apply whatever changes you want to it.

这是可能的，但不是你目前拥有或可能想要的方式，它不会优雅地降级，但你可以从你的 html 中取出图像并使用 jQuery 将它插入你的 html 并应用你想要的任何更改.

Example:

例子：

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

But doing it like this it doesn't make any sense to me as to why you wouldn't just edit the image source anyway.

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