暖冬的源码分享

 找回密码
 立即加入

QQ登录

只需一步,快速开始

搜索
热搜: 巧借
查看: 14077|回复: 0

巧借discuz论坛的lazyload延迟加载图片函数

[复制链接]
发表于 2012-3-20 18:37:21 | 显示全部楼层 |阅读模式
当前,图片延迟加载在各大站点被广泛应用,节约流量成为各站点的主题了。
在新版本的discuz X2以上版本,已经集成了一个图片延迟加载的方法。让我们拿出来利用一下吧。

以下为代码部分:
  1. //图片延迟加载开始
  2. function _attachEvent(obj, evt, func, eventobj) {
  3.         eventobj = !eventobj ? obj : eventobj;
  4.         if(obj.addEventListener) {
  5.                 obj.addEventListener(evt, func, false);
  6.         } else if(eventobj.attachEvent) {
  7.                 obj.attachEvent('on' + evt, func);
  8.         }
  9. }
  10. function lazyload(className) {
  11.         var obj = this;
  12.         lazyload.className = className;
  13.         this.getOffset = function (el, isLeft) {
  14.                 var  retValue  = 0 ;
  15.                 while  (el != null ) {
  16.                         retValue  +=  el["offset" + (isLeft ? "Left" : "Top" )];
  17.                         el = el.offsetParent;
  18.                 }
  19.                 return  retValue;
  20.         };
  21.         this.initImages = function (ele) {
  22.                 lazyload.imgs = [];
  23.                 var eles = lazyload.className ? $C(lazyload.className, ele) : [document.body];
  24.                 for (var i = 0; i < eles.length; i++) {
  25.                         var imgs = eles[i].getElementsByTagName('IMG');
  26.                         for(var j = 0; j < imgs.length; j++) {
  27.                                 if(imgs[j].getAttribute('osrc') && !imgs[j].getAttribute('lazyloaded')) {
  28.                                         if(this.getOffset(imgs[j]) > document.documentElement.clientHeight) {
  29.                                                 lazyload.imgs.push(imgs[j]);
  30.                                         } else {
  31.                                                 imgs[j].setAttribute('src', imgs[j].getAttribute('osrc'));
  32.                                                 imgs[j].setAttribute('lazyloaded', 'true');
  33.                                         }
  34.                                 }
  35.                         }
  36.                 }
  37.         };
  38.         this.showImage = function() {
  39.                 this.initImages();
  40.                 if(!lazyload.imgs.length) return false;
  41.                 var imgs = [];
  42.                 var scrollTop = Math.max(document.documentElement.scrollTop , document.body.scrollTop);
  43.                 for (var i=0; i<lazyload.imgs.length; i++) {
  44.                         var img = lazyload.imgs[i];
  45.                         var offsetTop = this.getOffset(img);
  46.                         if (!img.getAttribute('lazyloaded') && offsetTop > document.documentElement.clientHeight && (offsetTop  - scrollTop < document.documentElement.clientHeight)) {
  47.                                 var dom = document.createElement('div');
  48.                                 var width = img.getAttribute('width') ? img.getAttribute('width') : 100;
  49.                                 var height = img.getAttribute('height') ? img.getAttribute('height') : 100;
  50.                                 dom.innerHTML = '<div style="width: '+width+'px; height: '+height+'px;background: url(/images/loading.gif) no-repeat center center;"></div>';
  51.                                 img.parentNode.insertBefore(dom.childNodes[0], img);
  52.                                 img.onload = function () {if(!this.getAttribute('_load')) {this.setAttribute('_load', 1);this.style.width = this.style.height = '';this.parentNode.removeChild(this.previousSibling);}};
  53.                                 img.style.width = img.style.height = '1px';
  54.                                 img.setAttribute('src', img.getAttribute('osrc') ? img.getAttribute('osrc') : img.getAttribute('src'));
  55.                                 img.setAttribute('lazyloaded', true);
  56.                         } else {
  57.                                 imgs.push(img);
  58.                         }
  59.                 }
  60.                 lazyload.imgs = imgs;
  61.                 return true;
  62.         };
  63.         this.showImage();
  64.         _attachEvent(window, 'scroll', function(){obj.showImage();});
  65. }
  66. _attachEvent(window, 'load', function(){o=new lazyload(); o.showImage();});
  67. //图片延迟加载结束
复制代码
将上述代码添加到你的全局使用的公共JS文件里面,之后的操作就是将页面里面的img标签的
src替换为 osrc,同时设置一张默认的src图片即可(根据实际情况自行设置)。

注意这一句:
  1. dom.innerHTML = '<div style="width: '+width+'px; height: '+height+'px;background: url(/images/loading.gif) no-repeat center center;"></div>';
复制代码

这里设置了一张加载时的图片,可以从下面获得。
参考演示站点:mall.artxun.com

默认设置的图

默认设置的图

JS里面用到的

JS里面用到的
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即加入

本版积分规则

手机版|小黑屋|享码网 ( 京ICP备12003721号 )

GMT+8, 2024-3-29 13:52

Powered by Discuz! X3.5

Copyright © 2001-2021 Tencent Cloud.

快速回复 返回顶部 返回列表