在这个例子中，当我单击按钮时，我可以获得以下代码来在div#add元素中创建动态图像，但是加载事件img不起作用。
<html>
<head>
<title>None!</title>
<script type="text/javascript" src="Scripts\jquery-1.6.2.min.js"></script>
</head>
<body>
<button id="click">Click</button>
<div id="add"></div>
<script>
$(document).ready(function(){
$('#click').click(function() {
$('div#add').append('<img src="./images/imagename.jpg" />');
});
$('img').bind('load',function(){
alert('test');
});
});
</script>
</body>
</html>
我也尝试将onload事件设置为动态img，但我没有触发事件。任何帮助深表感谢。
更新（2011-10-24 18:55 EST） ： Load-Event的JQuery 文档似乎说明了以下内容。
与图像一起使用时加载事件的注意事项
开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行一个函数。应该注意几个已知的警告。这些是：
- 它不能始终如一地工作，也不能可靠地跨浏览器
- 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
- 它不会正确地冒泡 DOM 树 -
可以停止触发已经存在于浏览器缓存中的图像
我想使用 load 事件不是一个故障安全的跨浏览器解决方案。
更新（2011-10-28 15:05 EST）：感谢@Alex，我能够使用他的waitForImages插件并制作一个监听器（我不确定这是否是正确的术语）来确定图像何时被加载。
<html>
<head>
<title>None!</title>
<script type="text/javascript" src="Scripts\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scripts\jquery.waitforimages.js"></script>
</head>
<body>
<button id="click">Click</button>
<div id="add"></div>
<script>
$(document).ready(function(){
setInterval(function(){
$('div#add img.art').waitForImages(function() {
$('div#add img.load').hide();
$(this).show();
});
}, 500);
$('#click').click(function() {
$('div#add').append('<img class="load" src="./images/loading.gif" /><img style="display:none;" width="199" class="art" src="./images/imagename.jpg" /><br />');
});
});
</script>
</body>
</html>
因此，现在确定图像是否已加载最多有 500 毫秒的延迟。这看起来合理吗？这是查看是否已加载动态创建的 img 标签的最佳方法吗？
setInterval杰出：加载所有图像后，我必须停止触发该功能。我仍然需要弄清楚这方面的细节。