|
当前,图片延迟加载在各大站点被广泛应用,节约流量成为各站点的主题了。
在新版本的discuz X2以上版本,已经集成了一个图片延迟加载的方法。让我们拿出来利用一下吧。
以下为代码部分:
- //图片延迟加载开始
- function _attachEvent(obj, evt, func, eventobj) {
- eventobj = !eventobj ? obj : eventobj;
- if(obj.addEventListener) {
- obj.addEventListener(evt, func, false);
- } else if(eventobj.attachEvent) {
- obj.attachEvent('on' + evt, func);
- }
- }
- function lazyload(className) {
- var obj = this;
- lazyload.className = className;
- this.getOffset = function (el, isLeft) {
- var retValue = 0 ;
- while (el != null ) {
- retValue += el["offset" + (isLeft ? "Left" : "Top" )];
- el = el.offsetParent;
- }
- return retValue;
- };
- this.initImages = function (ele) {
- lazyload.imgs = [];
- var eles = lazyload.className ? $C(lazyload.className, ele) : [document.body];
- for (var i = 0; i < eles.length; i++) {
- var imgs = eles[i].getElementsByTagName('IMG');
- for(var j = 0; j < imgs.length; j++) {
- if(imgs[j].getAttribute('osrc') && !imgs[j].getAttribute('lazyloaded')) {
- if(this.getOffset(imgs[j]) > document.documentElement.clientHeight) {
- lazyload.imgs.push(imgs[j]);
- } else {
- imgs[j].setAttribute('src', imgs[j].getAttribute('osrc'));
- imgs[j].setAttribute('lazyloaded', 'true');
- }
- }
- }
- }
- };
- this.showImage = function() {
- this.initImages();
- if(!lazyload.imgs.length) return false;
- var imgs = [];
- var scrollTop = Math.max(document.documentElement.scrollTop , document.body.scrollTop);
- for (var i=0; i<lazyload.imgs.length; i++) {
- var img = lazyload.imgs[i];
- var offsetTop = this.getOffset(img);
- if (!img.getAttribute('lazyloaded') && offsetTop > document.documentElement.clientHeight && (offsetTop - scrollTop < document.documentElement.clientHeight)) {
- var dom = document.createElement('div');
- var width = img.getAttribute('width') ? img.getAttribute('width') : 100;
- var height = img.getAttribute('height') ? img.getAttribute('height') : 100;
- dom.innerHTML = '<div style="width: '+width+'px; height: '+height+'px;background: url(/images/loading.gif) no-repeat center center;"></div>';
- img.parentNode.insertBefore(dom.childNodes[0], img);
- img.onload = function () {if(!this.getAttribute('_load')) {this.setAttribute('_load', 1);this.style.width = this.style.height = '';this.parentNode.removeChild(this.previousSibling);}};
- img.style.width = img.style.height = '1px';
- img.setAttribute('src', img.getAttribute('osrc') ? img.getAttribute('osrc') : img.getAttribute('src'));
- img.setAttribute('lazyloaded', true);
- } else {
- imgs.push(img);
- }
- }
- lazyload.imgs = imgs;
- return true;
- };
- this.showImage();
- _attachEvent(window, 'scroll', function(){obj.showImage();});
- }
- _attachEvent(window, 'load', function(){o=new lazyload(); o.showImage();});
- //图片延迟加载结束
复制代码 将上述代码添加到你的全局使用的公共JS文件里面,之后的操作就是将页面里面的img标签的
src替换为 osrc,同时设置一张默认的src图片即可(根据实际情况自行设置)。
注意这一句:
- dom.innerHTML = '<div style="width: '+width+'px; height: '+height+'px;background: url(/images/loading.gif) no-repeat center center;"></div>';
复制代码
这里设置了一张加载时的图片,可以从下面获得。
参考演示站点:mall.artxun.com
|
-
默认设置的图
-
JS里面用到的
|