<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; font-family:Helvetica,sans-serif; font-size: 14px; } img{ display: block; border: none; } .banner{ margin: 10px auto; width: 200px; height: 136px; border: 1px solid green; background: url("img/timg.jpg") no-repeat center center; } .banner img{ display: none; width: 100%; height: 100%; } </style> <body> <div class="banner" id="banner"> <!--trueImg是当前img标签的自定义属性,实际图片地址--> <img src="" trueImg="img/1.jpg"/> </div> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript"> var banner=document.getElementById("banner"),imgFir=banner.getElementsByTagName("img")[0]; window.onscorll=function() { if(banner.isLoad){//->已加载了 return; } var A = banner.offsetHeight + utils.offset(banner).top; var B = utils.win("clientHeight") + utils.win("scrollTop"); if (A < B) { var oImg = new Image; oImg.src = imgFir.getAttribute("trueImg"); oImg.onload = function () { imgFir.src = this.src; oImg.style.display = "block"; oImg = null; //->1) } //->2) banner.isLoad=true;//->设置一个自定义的属性 } } </script> </body> </html>
<!--注意事项: 1.需要注意判断何时开始加载 A<B 2.需要注意设置一个自定义属性,在保证加载过一次之后不用重复进行加载,浪费资源,判断已经加载则不用重复加载直接return 1)放置到这个位置错误点,如果图片地址不正确则会进行重复加载,因为这个位置是图片加载成功后执行 2)放置到这个位置正确,不管图片地址是否正确只要判断了就会执行-->