将 iframe 和图像注入 html 并等待 onload 事件

【问题标题】：Injecting Iframe and image to html and wait for onload event将 iframe 和图像注入 html 并等待 onload 事件
【发布时间】：2014-01-16 15:47:34
【问题描述】：

在某些 ajax 成功事件中，我有一些来自服务器的字符串：
我想在</body> 之前注入波纹管标签并等待它们都加载。
在它们都加载后，我想提醒一些东西

...
,
success : function(data){
    var iframe = "<iframe src='http://blablabla.com'></iframe>";// came as data.iframe
    var image = "<img src='http://blablabla.com' />";//came as data.image
    // how do i inject it to html syncly 
    alert("both iframe an image loaded completely");
}

我可以使用 Jquery 或原生。

谢谢

【问题讨论】：

标签： jquery dom-manipulation

【解决方案1】：

你可以这样做；

HTML：

<button id='load'>Load image and iframe</button><br />

JS：

$(function(){
    $('#load').on('click', function(){
        var obj=$('<iframe/>', {
            id:'iframe_google',
            src:'http://blablabla.com',
            style:'display:none;width:400px;height:400px',
            load:function(){
                $(this).show();
                var imgPaht = "http://blablabla.com";
                $('<img src="'+ imgPaht +'">').load(function() {
                  $(this).width(1000).height(1000).appendTo('body');
                    alert("Iframe and image loaded");
                })

            }
        });
        $('body').append(obj);    
    });
});

我已经更新了网址并举了一个例子。

你可以看到工作演示here

【讨论】：