Question

<style>
.desgin_iframe_dimn {
background: white;
height: 500px;
width: 500px;
}
</style>
<iframe scrolling="no" id="lazy" class="desgin_iframe_dimn" data-src="http://www.google.com"></iframe>
<p class="lazy">Click Here</p>
<script>
function LazyLoadIframe() {
$('.lazy').click(function() {
    $('#lazy').attr('src', function() {
        return $(this).data('src');
    });
});

$('#lazy').attr('data-src', function() {
    var src = $(this).attr('src');
    $(this).removeAttr('src');
    return src;
});

}
LazyLoadIframe();
</script>

演示在这里jsfiddle

以上代码在IE9及其他浏览器中运行良好。 IE8但不在IE7中。我该如何解决这个问题？

Answer 1

我不知道为什么你的代码中有这个部分：

$('#lazy').attr('data-src', function() {
    var src = $(this).attr('src');
    $(this).removeAttr('src');
    return src;
});

但由于#lazy没有src，这可能是在IE7上打破它的部分。其他浏览器可能有效，因为在html中声明iframe之前执行了这段代码。

我认为你想要的是：

<强> HTML

在这里，我将data-src移动到可点击的<p>：

<iframe scrolling="no" id="lazy" class="desgin_iframe_dimn"></iframe>
<p class="lazy" data-src="http://www.wikipedia.com/">Click Here</p>

<强>的Javascript

$(function() {
    $('.lazy').click(function() {
        $('#lazy').attr('src', $(this).data('src'));
    });
});

在文档加载时执行$(function() { });的位置。不要只在HTML中间调用函数，始终考虑使用$(function() {});

我也不明白你为什么function() { return $(this).data('src') }做$(this).data('src')，所以我也纠正了。

jsFiddle here

iframe的延迟加载在IE7中不起作用

1 个答案: