<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js图片实时加载</title> <style> *{padding:0; margin:0;} .wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;} .fl{width:700px; padding:25px; float:left; border:1px solid #dedede; line-height:40px; overflow:hidden;} .fr{width:220px; height:800px; float:right; background-color:#dedede;} .aimg{ display:block; max-width:700px; margin:0 auto; background:url() no-repeat center center;} </style> </head> <body> <div> <a href="https://www.cnblogs.com/xiaomou2014"><img src="https://pic.cnitblog.com/avatar/356740/20140716231521.png" alt="xiaomou2014的头像"></a> <a href="https://www.cnblogs.com/xiaomou2014"></a> </div> <div> <div> <h2>7年前截肢的19岁癌症晚期女孩</h2> <p></p> <img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /> <p></p> <img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" /> <p></p> <img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.jpg" /> <p>7年前截肢的19岁癌症晚期女孩</p> <a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a> <p>7年前截肢的19岁癌症晚期女孩</p> <a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a> <p>7年前截肢的19岁癌症晚期女孩</p> <a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a> <p>7年前截肢的19岁癌症晚期女孩</p> <a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a> <p>7年前截肢的19岁癌症晚期女孩</p> <a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img src="https://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a> </div> <div> </div> </div> <script> //兼容IE对getElementsByClassName if (navigator.appName == 'Microsoft Internet Explorer') { document.getElementsByClassName = function() { var tTagName = "*"; if (arguments.length > 1) { tTagName = arguments[1]; } if (arguments.length > 2) { var pObj = arguments[2] } else { var pObj = document; } var objArr = pObj.getElementsByTagName(tTagName); var tRObj = new Array(); for ( var i = 0; i < objArr.length; i++) { if (objArr[i].className == arguments[0]) { tRObj.push(objArr[i]); } } return tRObj; } } //图片加载 function loadImg(imgClass,imgSrc){ //data-src:存放需要加载的图片的路径 var arrImg=document.getElementsByClassName(imgClass); //需要实时加载class为imgClass的图片数组 for(var i=0; i<arrImg.length; i++){ if(!arrImg[i].getAttribute(imgSrc)) continue; if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight >arrImg[i].offsetTop){ arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc)); arrImg[i].removeAttribute(imgSrc); } } } window.onload=window.onscroll=function(){loadImg("aimg","data-src")} </script> </body> </html>
您可能感兴趣的文章: