将预加载的 img 转换为 iframe答案

【问题标题】：convert preload img to iframe将预加载的 img 转换为 iframe
【发布时间】：2011-09-12 15:58:30
【问题描述】：

$('<img />')
   .attr('src', val)
   .attr('width', "400")
   .load(function(){
      $('.showdata').append( $(this) );
   }
);

这对图像非常有效，如何将 1:1 转换为 iframe？这里快速jsfiddle： http://jsfiddle.net/ET8Gw/

【问题讨论】：

您能更清楚地了解您想要实现的目标吗？你有什么问题？

标签： javascript jquery iframe preloading

【解决方案1】：

与 Image 对象不同，IFrame 在成为 DOM 的一部分之前不会加载。

要解决这个问题，您可以隐藏元素，将其添加到 DOM，并在加载事件触发时显示它：

var val = "http://dumb.com/";
 $('<iframe />')
            .hide()
            .attr('src', val)
            .attr('width', "500")
            .load(function(){
                $(this).show();
            })
            .appendTo(".showdata");

http://jsfiddle.net/ET8Gw/1/

【讨论】：

@Writecoder，如果该答案解决了您的问题，请考虑通过单击左侧的绿色复选标记将其作为您问题的解决方案

【解决方案2】：

var val = "http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/texas_drought_fires/bp1.jpg";
$('<iframe/>')
    .attr('src', val)
    .attr('width', "500")
    .appendTo($('.showdata'));

http://jsfiddle.net/ET8Gw/5/

【讨论】：

【解决方案3】：

试试这样的：

$("<iframe></iframe>")
    .css("display":"none")
    .attr('src', val)
    .load( 
        function(){
            $(this).show();
        })
    .appendTo(".showData");

它不会跨域工作。

【讨论】：

【解决方案4】：

我让它工作了

var val = "http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/texas_drought_fires/bp1.jpg";

$('.showdata').append('<iframe src="' + val + '" width="400" height="200"><\/iframe>');

jsFiddle：http://jsfiddle.net/ET8Gw/22/

【讨论】：