Question

在此示例中，当我单击按钮时，我可以获得以下代码在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功能的触发。我仍然需要详细说明。

Answer 1

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

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

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

动态HTML img Not Bind上的绑定/活动加载事件

我想使用load事件不是故障安全的跨浏览器解决方案。

1 个答案: