javascript - Lazy Load for iframe is not working in IE7 -

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

demo here jsfiddle

above code works in other browsers in ie9 & ie8 not in ie7. how fix ?

i don't know why have part in code:

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

but since #lazy has no src, might part breaks on ie7. other browsers might work because piece of code executed before iframe declared in html.

i think want this:

html

here moved data-src clickable <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'));     }); }); 

where $(function() { }); executed on document load. don't call function in middle of html, consider use $(function() {});

i don't understand why did function() { return $(this).data('src') } while can $(this).data('src'), corrected too.

jsfiddle here