iframe的延遲加載未在IE7工作

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

在這裏，我感動數據-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