帝国cms内容页newstext字段图片延迟加载（添加data-original属性）
作者：admin 时间:2020-01-06 阅读数：5人
网页用懒加载插件 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>
这样内容页正文中的图片就添加了图片延迟加载的效果。
本文讲解一下怎样给帝国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>
这样内容页正文中的图片就添加了图片延迟加载的效果。
声明
源码下载不顺利，比如源码在百度网盘的有时会被无故取消等，请联系QQ：46667551
本站大部分下载资源收集于网络，但除特别说明之外，基本全部亲自测试可用！
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
原文链接：http://www.dnwfb.com//865.html，转载请注明出处
