标签:
图片量越来越大,网页加载不堪重负。还是得用lazyload...
实现要点:页面绑定滚动事件;加载页面的时候把地址放于一个属性中;在滚动过程中判断元素是否进入显示的区域内;加载图片。
主要相关问题:浏览器兼容,如获取浏览器可见部分的宽度:
window.innerHeight || document.documentElement.clientHeight
获得页面相对可见部分的左上角的竖直方向的坐标:
window.pageYOffset || window.document.documentElement.scrollTop
获取页面元素的位置:
element.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop
图片加载:需要先把图片的真实地址放在图片元素的一个属性里面,真实的src存放一个很小的透明图片。在加载的时候,最好有个提示让用户可以清楚的看到图片在加载。
使用jQuery,可以比较清晰的看到实现的思路:
$(window).scroll(function() { var _scrollTop = $(this).scrollTop(); //当前滚动条的位置 $(‘img‘).each(function() { var _top = $(this).offset().top; //这个img距离页面顶部的高度 var _height = $(window).height(); //窗口高度 if(_scrollTop + _height * 0.5 > _top) { //当img的元素出现在窗口中央 $(this).lazyload(); } }); });
原生JS:
var lazyLoad = (function (args) { var defaults = (arguments.length == 0) ? { src: ‘xxx‘, time: 100} : { src: args.src || ‘xxx‘, time: args.time ||100}; var camelize = function (s) { return s.replace(/-(\w)/g, function (str, p1) { return p1.toUpperCase(); }); }; this.getStyle = function (element, property) { if (arguments.length != 2) return false; var value = element.style[camelize(property)]; if (!value) { if (document.defaultView && document.defaultView.getComputedStyle) { var css = document.defaultView.getComputedStyle(element, null); value = css ? css.getPropertyValue(property) : null; } else if (element.currentStyle) { value = element.currentStyle[camelize(property)]; } } return value == ‘auto‘ ? ‘‘ : value; }; var _init = function () { var offsetPage = window.pageYOffset||window.document.documentElement.scrollTop, offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight), docImg = document.images, _len = docImg.length; if (!_len) return false; for (var i = 0; i < _len; i++) { var attrSrc = docImg[i].getAttribute(defaults.src), o = docImg[i], tag = o.nodeName.toLowerCase(); if (o) { postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, ‘height‘).replace(‘px‘, ‘‘)); if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) { if (tag === "img" && attrSrc !== null) { o.setAttribute("src", attrSrc); } o = null; } } }; window.onscroll = function () { _init(); }; }; return _init(); }); lazyLoad({ src:"imgSrc", time:100 });
标签:
原文地址:http://www.cnblogs.com/linda586586/p/4237184.html