网页用懒加载插件 lazyload.js可以实现页面图片延迟加载的效果,这需要在图片标签
中添加 data-original等属性,在帝国cms的首页、列表页中,可以直接给图片的属性添加data-original等属性,但内容页调用内容直接用[!–newstext–],文章正文中的图片标签是
没有其他的属性。
本文讲解一下怎样给帝国cms正文的图片添加data-original属性,从而实现内容页图片延迟加载效果。
1、把附件懒加载js文件直接上传到skin目录下,请查看是否有重名的,如有,请自行更改。
2、复制如下代码到e/class/userfun.php里面。
//图片延迟加载插件正则 function get_img_thumb_url($content="") { $pregRule = "/<[img|IMG].*?src=[\'|\"](.*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp]))[\'|\"].*?[\/]?>/"; $content = preg_replace($pregRule, '<img src="/skin/lazy/images/loading.gif" data-original="${1}">', $content); return $content; }
3、请到相应模板里面加入代码。如内容字段不是newstext,请自行修改。模板示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片加载技术实例</title> <SCRIPT src="[!--news.url--]skin/lazy/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="[!--news.url--]skin/lazy/jquery.lazyload.min.js" type=text/javascript></SCRIPT> <script type="text/javascript" charset="utf-8"> $(function() { $("img").lazyload({ placeholder : "[!--news.url--]skin/lazy/images/loading.gif", effect: "fadeIn" }); }); </script> <style> img a,img{border:0px;} div{ margin-bottom:10px;} </style> </head> <body> <?=get_img_thumb_url(stripslashes($navinfor['newstext']))?> </body> </html>