<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> (function ($) { $.extend($.fn, { lazyloadImg: function (option) { var settings = { defObj: null, defHeight: 0 }; settings = $.extend(settings, option || {}); var defHeight = settings.defHeight, defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img"); var pageTop = function () { return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - settings.defHeight; }; var imgLoad = function () { defObj.each(function () { if ($(this).offset().top <= pageTop()) { var orgSrc = $(this).attr("orgsrc"); if (orgSrc) { $(this).attr("src", orgSrc).removeAttr("orgsrc"); } } }); }; imgLoad(); var timer = null; $(window).bind("scroll", function () { if (timer) { clearTimeout(timer) } timer = setTimeout(function () { imgLoad(); }, 100); }); } }); })(jQuery); </script> <script type="text/javascript"> $(function () { $("body").lazyloadImg({ "defObj": "body" }); }); </script>