立即注册 登录
彼岸网 返回首页

牛肉炖土豆的个人空间 http://www.bian-wang.com/discuz/?10744 [收藏] [复制] [分享] [RSS]

日志

关于DZ自带延迟加载JS适用到所有图片的问题

热度 2已有 685 次阅读2018-1-3 08:33 PM |个人分类:建站笔记

DISCUZ有个延迟加载图片的功能,
后台-全局-性能优化-服务器优化-开启图片延时加载:
但这个只在内容页起效,
要想适用于全局,包括首页,列表页,头像等图片时,就需要把JS全局化

1.延迟加载JS在这里定义的static\js\forum_viewthread.js
稍微修改一下就变成下面这样的了(网络上的修改方法)
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('+IMGDIR + '/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,添加在static\js\common.js

2.需要用到延迟的图片标签上,加
<img  aid="$attach[aid]" src="{STATICURL}image/common/none.gif"  osrc="图片地址"  />

原理:哦,不去掉也可以

PS.刚测试了一下,感觉效果还可以,暂时未发现BUG

路过

鸡蛋
1

鲜花
1

握手

雷人

刚表态过的朋友 (2 人)

发表评论 评论 (8 个评论)

回复 牛肉炖土豆 2018-1-4 08:36 PM
天香公主: 给我网页的url
刚看到,URL已私信给您了,谢谢
回复 天香公主 2018-1-4 11:58 AM
牛肉炖土豆: 发现BUG了,
这个在非内容页使用时,
首屏的图片,点击后会弹出东西,
请问有办法禁止弹出吗?
给我网页的url
回复 牛肉炖土豆 2018-1-4 10:19 AM
天香公主: 不重复吧,第一句是在浏览器的滚动条在移动时不断检查有什么图片会进入屏幕部分进而显示那些图片。第二句只在浏览器最初显示该网页时执行一次,产生了那个lazylo ...
发现BUG了,
这个在非内容页使用时,
首屏的图片,点击后会弹出东西,
请问有办法禁止弹出吗?
回复 牛肉炖土豆 2018-1-3 11:42 PM
天香公主: 不重复吧,第一句是在浏览器的滚动条在移动时不断检查有什么图片会进入屏幕部分进而显示那些图片。第二句只在浏览器最初显示该网页时执行一次,产生了那个lazylo ...
明白了,正式已经用上去了,希望不会出现BUG,哈
回复 天香公主 2018-1-3 11:35 PM
牛肉炖土豆: 内容页用到的自带的forum_viewthread.js里的,已经定义了file,
所以在其他地方,引用osrc的JS,为了不冲突吧?,
我的测试结果是只要用到这个的地方,把图片标 ...
不重复吧,第一句是在浏览器的滚动条在移动时不断检查有什么图片会进入屏幕部分进而显示那些图片。第二句只在浏览器最初显示该网页时执行一次,产生了那个lazyload对象。不过好象第二句里的o.showImage部分是多余的。
回复 牛肉炖土豆 2018-1-3 11:26 PM
天香公主: 好文。原来的做法是利用file属性,改用osrc属性有什么原因吗?内容页里的图片元素的file属性是在parseImg里加进去的,那如果要在其它地方用这个功能,也需要在类 ...
回复 牛肉炖土豆 2018-1-3 11:21 PM
天香公主: 好文。原来的做法是利用file属性,改用osrc属性有什么原因吗?内容页里的图片元素的file属性是在parseImg里加进去的,那如果要在其它地方用这个功能,也需要在类 ...
内容页用到的自带的forum_viewthread.js里的,已经定义了file,
所以在其他地方,引用osrc的JS,为了不冲突吧?,
我的测试结果是只要用到这个的地方,把图片标签里osrc属性加上就可以。我是手动加进去了,也没设ID和class,可是却有效果。。。
最后这两句是不是重复了呢?
_attachEvent(window, 'scroll', function(){obj.showImage();});
_attachEvent(window, 'load', function(){o=new lazyload(); o.showImage();});
回复 天香公主 2018-1-3 11:07 PM
好文。原来的做法是利用file属性,改用osrc属性有什么原因吗?内容页里的图片元素的file属性是在parseImg里加进去的,那如果要在其它地方用这个功能,也需要在类似于parseImg的地方把osrc属性加上去吧?

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2018-8-20 01:07 PM , Processed in 0.051563 second(s), 8 queries. ,ApcOn

返回顶部