Question

我正在创建简单的html页面，其中一个图像动态添加到div，如下所示

$(".step3html").html('<img class="mobimg thumbnail" src="img/'+keys+'">');

我想在图像完全加载后调整容器大小（它是绝对容器）。那么如何检查附加图像是否被加载并调用一些函数，我将根据整个容器宽度运行调整大小函数。

我在附加图片后立即尝试下面的代码，它似乎没有。

$(".mobimg").on('load', function() {
alert("das"); 
 });

这是测试https://jsfiddle.net/whhjtwpp/2/

的小提琴

Answer 1

以下代码有效。

$(".step3html").html('<img class="mobimg thumbnail" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">');

$(".mobimg").on('load', function() {
  alert("das");
});

试试这个小提琴。

https://jsfiddle.net/pparas/whhjtwpp/

您可能遇到其他问题。您是否在控制台中检查了keys的值？

修改

这是一个工作小提琴。

https://jsfiddle.net/pparas/whhjtwpp/4/

Answer 2

您应该从新创建的元素$(...)开始。这段代码有效。

img

Answer 3

你可以写：

$('.mobimg').load(function(){
   //your code
});

当所有元素和子元素完全加载时，.load()被触发。

Answer 4

与所有事件一样，在尝试将加载处理程序绑定到它之前，image元素必须存在。这就是https://jsfiddle.net/pparas/whhjtwpp/有效的原因，但https://jsfiddle.net/whhjtwpp/2/没有。
必须在加载图像之前绑定加载处理程序。

典型的模式是create an image, bind the load handler, then set the src。

Answer 5

添加一个事件监听器，让图像通过onload宣布自己

<img class="mobimg thumbnail" onload='loadedImageFunction(this.id)' src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

然后编写javascript函数

检查是否加载了动态添加的图像

5 个答案: