在本例中，当我单击按钮时，我可以获得以下代码来在div#add元素中创建动态图像，但是img的加载事件不起作用。
<html>
<head>
<title>None!</title>
<script type="text/javascript" src="Scriptsjquery-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>
我还尝试在动态img上设置onload事件，但我没有让事件着火。如有任何帮助，不胜感激。
更新(2011-10-24 18:55 EST): JQuery的Load-Event文档中有如下声明:
与images一起使用时的load事件注意事项
开发人员试图使用.load()来解决的一个常见挑战快捷方式是在图像(或集合)的时候执行函数图片)已完全加载。有几个已知的警告这一点值得注意。这些都是:-它不一致地工作，也不可靠跨浏览器
-如果图像src被设置为与之前相同的src，在WebKit中不会正确启动
-没有正确地冒泡DOM树
-可以停止触发已经存在于浏览器缓存中的图像
我猜使用load事件不是一个故障安全，跨浏览器的解决方案。
更新(2011-10-28 15:05 EST):感谢@Alex，我能够使用他的waitForImages插件并制作一个侦听器(我不确定这是否是正确的术语)来确定图像何时已加载。
<html>
<head>
<title>None!</title>
<script type="text/javascript" src="Scriptsjquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scriptsjquery.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功能后，所有的图像已经加载。
将bind()更改为on()，并相应地调整参数
当您简单地bind()时，它绑定到DOM中的所有元素。当您使用on()时，它查找冒泡到共同祖先的事件，然后检查它们的起源并触发任何附加事件。
这意味着它将处理所有未来的img元素。