Question

我需要在浏览器中加载并完全渲染图像（将其附加到dom）后调用方法。

在以下示例中，window.onload仅触发一次，现在按下按钮后。

任何想法如何解决这个/

    <!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>

Answer 1

将onload函数添加到img它将每次都有效

<!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 onload="callMe()" id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50">';
};

window.onload = function() {
    alert("load an rendered main");
};

$('img').load(function(){
    alert('loaded and redered');
});

function callMe() {
    alert("loaded");

}



</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"></img>
<img onload="callMe" id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50">


<button id="btn" onClick="window.test();"> click me</button>

</body>
</html>

Answer 2

以下代码解决了我的问题。

基本上我必须在动态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="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元素后加载和渲染图像时调用方法？

2 个答案: