<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #div1 { height: 200px; background-color: #bbbbbb; font-size: 100px; } </style> </head> <body style="height:3500px"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /> <img id="div1" src="../Img/4.png" realsrc="http://cdn1.gurucv.com/Reg/Images/person/person1.png" /> <script type="text/javascript"> //var ele = document.getElementById(‘div1‘); var ele = document.getElementsByTagName(‘img‘).item(0); function offset(ele) { var t = ele.offsetTop; var l = ele.offsetLeft; var p = ele.offsetParent; while (p) { if (window.navigator.userAgent.indexOf(‘MSIE 8‘) > -1) { l += p.offsetLeft; t += p.offsetTop; } else { l += p.offsetLeft + p.clientLeft; t += p.offsetTop + p.clientTop;; } p = p.offsetParent; } return { left: l, top: t }; } var h = offset(ele).top + ele.offsetHeight;//这是这个元素底边距文档顶部的绝对偏移量 window.onscroll = function () { var winBottom = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight); if (h < winBottom) { // ele.src = ele.realsrc; //自定义属性,不能用 ‘.’的方式去取 if (!ele.loaded) { var realImg = ele.getAttribute(‘realsrc‘); ele.src = ‘../Img/loading.jpg‘; var tempImg = new Image;//等价于 document.createElement(‘img‘); tempImg.src = realImg;//自动下载图片,自动去请求图片 /* 浏览器所有的外链资源,都是缓存 */ tempImg.onload = function () {//只是被运行一次 ele.src = realImg; ele.loaded = true;//标志属性 }; } } } </script> </body>> </html>
时间: 2024-11-05 22:39:15