等到所有图像在更改它们的 src 后加载答案

【问题标题】：Wait until all images are loaded after changing their src等到所有图像在更改它们的 src 后加载
【发布时间】：2012-09-22 04:49:25
【问题描述】：

我有一个项目，在文档完全加载后，我必须更改图像的 src 属性（稍微修复它们）。

我想要的是检查 src 属性更改后的所有图像是否已完全加载的选项，以便我可以计算它们的高度并在此基础上继续我的代码。

这可能吗？

【问题讨论】：

出于好奇......“稍微修复它们”是什么意思。如果更改 src，可能会导致加载另一个图像。只是想确定这就是你要找的东西。
没错，用新的图片替换，然后如何确定它们何时都已完全加载

标签： jquery html css

【解决方案1】：

你可以用 jQuery 做：

$('img#newsrc').load(function(){  // this triggers after image is loaded

    // do your checking

}

或特定图像：

var file = 'beautiful.jpg';
$('img').attr('src', file).load(function() {  
    alert(file + 'is loaded');  
});

【讨论】：

文档加载完毕，然后我更改所有图片的src，然后我想知道新图片何时加载完毕。
好的，我明白了。你可以使用 $('img').load(function()
使用 $('img').load(function(): 不起作用...并不总是好的结果
这可能对你有帮助：stackoverflow.com/questions/2392410/…

【解决方案2】：

如果你想在页面上的所有图片都加载完毕后做一些事情，试试这个：

$(document).ready(function () {
  var nImages = $('img').length;
  $('img').load(function () {
    nImages--;
    if (nImages == 0) {
      ... do whatever ...
    }
  }
});

如果您不想包含所有图像，只需将选择器“img”更改为更具体的内容。

【讨论】：