石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 技术笔记 >

帝国cms内容页newstext字段图片延迟加载(添加data-original属性)

发表日期:2020-01-01 16:52文章编辑:帝国CMS教程浏览次数: 标签: 技术笔记|帝国CMS|    

网页用懒加载插件 lazyload.js可以实现页面图片延迟加载的效果,这需要在图片标签<img>中添加 data-original等属性,在帝国cms的首页、列表页中,可以直接给图片的属性添加data-original等属性,但内容页调用内容直接用[!--newstext--],文章正文中的图片标签是<img src=''>没有其他的属性。
本文讲解一下怎样给帝国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>
 
这样内容页正文中的图片就添加了图片延迟加载的效果。

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jsbj/832.html

网站设计案例推荐

热门新闻

DEDECMS提示Fatal error错误

Nginx的Gzip压缩配置

织梦DedeCMS定时自动生成首页HTML的实现方法

IIS7下js文件启用Gzip后却不压缩的解决方法

dede织梦教程:列表页、文章页调用所有顶级栏目文章的方法

WordPress 集成百度 Sitemap 实时推送代码

织梦DedeCMS定时自动生成首页HTML的实现方法

WORDPRESS文章中微信打赏功能的2种实现方法

相关新闻

Dedecms如何显示文章数量的方法

dede出现search.php on line 44 search.php报错

dedecms大量删除文章后,列表页显示错误修复办法

DedeCMS最新文章、相关文章、推荐文章、热点文章、头条

织梦Dedecms tag标签长度限制的修改

dede织梦网站地图sitemap移出data

推荐新闻

织梦DEDECMS教程:添加RSS订阅功能

帝国cms灵动标签调用字母所属的信息

帝国cms怎么实现页面自动生成html

IIS7下js文件启用Gzip后却不压缩的解决方法

织梦DedeCMS实现{dede:channel}标签增加数字序号的方法

正确配置 WordPress 邮件SMTP

帝国cms如何在tags列表页获取当前tag的ID方法

dede简略标题调用标签

织梦CMS文章模型整合下载功能,可判断点数,会员组等下载权限