DEDECMS文章图片懒加载处理

对于文章中存在图片甚至很多图片的情况下,对图片进行懒加载处理是一个非常好的性能优化方式,这样就提升页面加载速度,下面是针对织梦系统中文章内容图片懒加载的修改方式。

DEDECMS文章图片懒加载处理步骤

1、引入Echo JS代码(可直接粘贴到目前公共JS文件中,已经压缩)

window.Echo=(function(window,document,undefined){var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset))};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute("data-echo");store.splice(i,1)}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle)};var init=function(obj){var nodes=document.querySelectorAll("[data-echo]");var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i])}_throttle();if(document.addEventListener){window.addEventListener("scroll",_throttle,false)}else{window.attachEvent("onscroll",_throttle)}};return{init:init,render:_throttle}})(window,document);Echo.init({offset:0,throttle:0});

2、将织梦模板中的img标签进行修改,将<img src替换为<img  data-echo

3、打开/include/arc.archives.class.php文件

找到

@SetSysEnv($this->Fields['typeid'],$this->Fields['typename'],$this->Fields['id'],$this->Fields['title'],'archives');

在其下面加入

$this->Fields['body'] = str_ireplace("src" ,"data-echo",$this->Fields['body']);

注意:此处修改是直接将body中的src替换为data-echo,相对直接,网上可能还有比较折中的方式,但相对麻烦,需要引入很多文件,目前我有网站按照上面方式处理后没有发现问题。

标题:DEDECMS文章图片懒加载处理

如若转载,请注明出处:https://www.bus81.com/course/50.html