在这个例子中，当我点击按钮时，我可以获得以下代码来在
元素中创建动态图像，但是![]()
的加载事件不起作用。
我还尝试在动态
更新（2011-10-24 18:55 EST）：JQuery文档中关于Load-Event的说明如下。
<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>
我还尝试在动态
img上设置onload事件，但我没有得到事件触发。非常感谢任何帮助。
更新（2011-10-24 18:55 EST）：JQuery文档中关于Load-Event的说明如下。
使用加载事件时与图像相关的注意事项
开发人员试图使用.load()快捷方式解决的常见问题是在图像（或图像集合）完全加载后执行函数。这有几个已知的注意事项。这些是：
- 在不同浏览器中不能保证一致可靠地工作
- 如果图像src设置为之前的相同src，则在WebKit中无法正确触发
- 它不能正确地向上传递DOM树
- 对于已经存在于浏览器缓存中的映像，可能会停止触发
我想使用载入事件并不是一个安全、跨浏览器的解决方案。
更新（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函数的触发。我仍然需要解决其中的细节问题。