如何在将图像添加到HTML元素后加载并呈现图像时调用方法？ [英] How to call a method when an image has been loaded and rendered after adding it to a HTML element?
本文介绍了如何在将图像添加到HTML元素后加载并呈现图像时调用方法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的示例窗口中，我们需要调用一个方法来完成一个图像的加载和完全呈现（将其附加到dom中）。 onload fire只有一次，现在按下按钮后。
任何想法如何解决这个/
< a href =http://jsbin.com/pisuzifofabo/1/ =nofollow> http://jsbin.com/pisuzifofabo/1/
<！DOCTYPE html>
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
< script>
window.test = function（）{
var body = document.getElementsByTagName（'body'）[0];
body.innerHTML + ='< img id =csrc =http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.pngheight =50width = 50>< / img>'
};
window.onload = function（）{
alert（load an rendered main）;
//调用我的方法
};
$ b $（'img'）。load（function（）{
alert（'loaded and redered'）;
}）;
< / script>
< / head>
< body>
< img id =asrc =http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpgheight =50width =50><< ; / IMG>
< img id =bsrc =http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpgheight =50width =50 >
< / img>
< button id =btnonClick =window.test（）;>点击我< /按钮>
< / body>
< / html>
解决方案
以下代码解决了我的问题。
基本上，我必须在呈现动态html后添加事件处理程序。
http://jsbin.com/tazejuhefixa/1/
<！DOCTYPE html>
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
< script>
var live = function（）{
$（img）.on（load，function（）{
alert（load and rendered img XX）;
}）;
};
var test = function（）{
console.log（'x'）;
var $ body = $（body）;
$ body.append（'< img id =csrc =http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.pngheight =50width = 50/>'）;
live（）;
};
$ b $（function（）{
// call my method
$（document）.on（load，img，function（）{// delegate
alert（load main）;
}）;
}）;
< / script>
< / head>
< body>
< img id =asrc =http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpgheight =50width =50/>
< img id =bsrc =http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpgheight =50width =50 />
< button id =btnonClick =test（）;>点击我< /按钮>
< / body>
< / html>
I need to call a method after an image has been loaded and fully rendered (appending it to the dom) in the browser.
In the following example window.onload fire only once, and now after pressing the button.
Any idea how to solve this/
http://jsbin.com/pisuzifofabo/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
window.test = function (){
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<img id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50"></img>'
};
window.onload = function() {
alert("load an rendered main");
// call my method
};
$('img').load(function(){
alert('loaded and redered');
});
</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"></img>
<img id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50">
</img>
<button id="btn" onClick="window.test();"> click me</button>
</body>
</html>
解决方案
The following code solved my problem.
Basically I had to adding event handlers after dynamically html was rendered.
http://jsbin.com/tazejuhefixa/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var live = function(){
$( "img" ).on( "load", function() {
alert("load and rendered img XX");
});
};
var test = function (){
console.log('x');
var $body = $("body");
$body.append('<img id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50"/>');
live();
};
$(function() {
// call my method
$(document).on("load","img",function(){ // delegate
alert("load main");
});
});
</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"/>
<img id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50"/>
<button id="btn" onClick="test();"> click me</button>
</body>
</html>
这篇关于如何在将图像添加到HTML元素后加载并呈现图像时调用方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
