圖片預載入與圖片懶載入（緩載）的區別與實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生Js圖片延遲載入</title> <style type="text/css"> *{margin: 0;padding: 0} img.scrollLoading{border: 1px solid #ccc;display:block;margin-top: 10px;} </style> </head> <body> <div id="content"> </div> </body> </html> <script type="text/javascript"> var _CalF = { zsl: function(object) { //選擇器 if (object === undefined) return; var getArr = function(name, tagName, attr) { var tagName = tagName || '*', eles = document.getElementsByTagName(tagName), clas = (typeof document.body.style.maxHeight === "undefined") ? "className": "class"; //ie6 attr = attr || clas, Arr = []; for (var i = 0; i < eles.length; i++) { if (eles[i].getAttribute(attr) == name) { Arr.push(eles[i]); } } return Arr; }; if (object.indexOf('#') === 0) { //#id return document.getElementById(object.substring(1)); } else if (object.indexOf('.') === 0) { //.class return getArr(object.substring(1)); } else if (object.match(/=/g)) { //attr=name return getArr(object.substring(object.search(/=/g) + 1), null, object.substring(0, object.search(/=/g))); } else if (object.match(/./g)) { //tagName.className return getArr(object.split('.')[1], object.split('.')[0]); } }, getPosition: function(obj) { //獲取元素在頁面裡的位置和寬高 var top = 0, left = 0, width = obj.offsetWidth, height = obj.offsetHeight; while (obj.offsetParent) { top += obj.offsetTop; left += obj.offsetLeft; obj = obj.offsetParent; } return { "top": top, "left": left, "width": width, "height": height }; } }; //新增圖片list var _temp = []; for (var i = 1; i < 21; i++) { _temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="http://images.cnitblog.com/blog/150659/201306/23160223-c81dd9aa9a2a4071a47b0ced2c9118bc.gif" /><br />圖片' + i); } _CalF.zsl("#content").innerHTML = _temp.join(""); function scrollLoad() { this.init.apply(this, arguments); } scrollLoad.prototype = { init: function(className) { var className = "img." + className, imgs = _CalF.zsl(className), that = this; this.imgs = imgs; that.loadImg(); window.onscroll = function() { that.time = setTimeout(function() { that.loadImg(); }, 400); } }, loadImg: function() { var imgs = this.imgs.reverse(), //獲取陣列翻轉 len = imgs.length; if (imgs.length === 0) { clearTimeout(this.time); return; } for (var j = len - 1; j >= 0; j--) { //遞減 var img = imgs[j], imgTop = _CalF.getPosition(img).top, imgSrc = img.getAttribute("data-src"), offsetPage = window.pageYOffset ? window.pageYOffset: window.document.documentElement.scrollTop, //滾動條的top值 bodyHeight = document.documentElement.clientHeight; //body的高度 if ((offsetPage + bodyHeight / 2) > (imgTop - bodyHeight / 2)) { img.src = imgSrc; this.imgs.splice(j, 1); } } } } var img1 = new scrollLoad("scrollLoading"); </script> 獲取螢幕的解析度 <script type="text/javascript"> document.write('您的顯示器解析度為:\n' + screen.width + '*' + screen.height + '</br>'); var ww = document.getElementById("con").offsetWidth, w = screen.width/ww, h = screen.height/ww, r = Math.round(Math.sqrt(w*w + h*h) / 2.54); document.write('您的顯示器尺寸為:\n' + (screen.width/ww).toFixed(1) + '*' + (screen.height/ww).toFixed(1) + ' cm, '+ r +'寸<br/>'); </script>