3

在这个例子中，当我单击按钮时，我可以获得以下代码来在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杰出：加载所有图像后，我必须停止触发该功能。我仍然需要弄清楚这方面的细节。

4

1 回答 1

3

bind()相应地更改on()并重新调整参数。

简单地说bind()，它绑定到 DOM 中的所有元素。当您使用on()时，它会查找冒泡到您的共同祖先的事件，然后检查它们的起源并触发任何附加事件。

这意味着它将处理所有未来的img元素。

于 2011-10-24T00:44:42.797 回答