帝国cms内容页newstext字段图片延迟加载

jQuery图片延迟加载插件jQuery.lazyload，使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。这需要在图片标签<img>中添加 data-original等属性，在帝国cms的首页、列表页中，可以直接给图片的属性添加data-original等属性，但内容页调用内容直接用[!--newstext--]，文章正文中的图片标签是<img src=''>没有其他的属性。（本网站仅帝国CMS信息栏目做了该功能，请查阅）

使用方法

1、引用jquery和jquery.lazyload.js到你的页面

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

为图片加入样式lazy 图片路径引用方法用data-original

<div id="container">
  <img class="lazy" src="loading.gif" data-original="img/bmw_m1_hood.jpg">
  <img class="lazy" src="loading.gif" data-original="img/bmw_m1_side.jpg">
  <img class="lazy" src="loading.gif" data-original="img/viper_1.jpg">
  <img class="lazy" src="loading.gif" data-original="img/viper_corner.jpg">
  <img class="lazy" src="loading.gif" data-original="img/bmw_m3_gt.jpg">
  <img class="lazy" src="loading.gif" data-original="img/corvette_pitstop.jpg">
</div>

js出始化lazyload并设置图片显示方式

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

在图片中也可以不使用 class="lazy"，初始化时使用：

$("img").lazyload({effect: "fadeIn"});

这样就可以对全局的图片都有效！

如果想提载入图片，可以使用 threshold 进行设置，在图片距离屏幕180px时提前载入：

$("img.lazy").lazyload({ threshold :180});

参数设置解说

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

复制如下代码到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;
}

内容页正文中的标签[!--newstext--]修改为<?=get_img_thumb_url(stripslashes($navinfor['newstext']))?>，注此方法改造后内容分页功能会失效，应将get_img_thumb_url函数写在对应字段里才不会影响分页功能。详情参考本站的：帝国CMS功能解密之字段处理函数

列表页实现图片延迟加载方案

[e:loop={‘news’,10,18,1,’istop=0 and firsttitle=0 and isgood=0′,’newstime DESC’}]
<li class=”clear”>
<div class=”imgarea fl”> <a href=”<?=$bqsr[‘titleurl’]?>” target=”_blank”><img src=”<?=$bqr[‘titlepic’]?>” alt=”<?=$bqr[‘title’]?>”> </a><span class=”cat”><a href=”<?=$bqsr[classurl]?>” target=”_blank”>
<?=$class_r[$bqr[classid]][classname]?>
</a></span> </div>
</li>

其中的<img>可以改成：<img src=”<?=$bqr[‘titlepic’]?>” alt=”<?=$bqr[‘title’]?>” width=”640″ height=”480″ data-original=”<?=$bqr[‘titlepic’]?>”>来符合jquery.lazyload.js的图片匹配要求。

图片延迟加载

参考网页：http://bbs.phome.net/ShowThread/?threadid=349997&forumid=13

常见问题

这是图片不按顺序（不连续）加载导致的，可以把下面这段代码加到lazyload.js初始化里面

<script type="text/javascript">
 $(function() {
      $("img").lazyload({failurelimit:20});//20为数值，可修改
  });
</script>

大意就是在网页可视范围（屏幕范围）循环加载图片，检测有没有在可视范围内没有显示出来的图片，加载范围多少张取决于你上边儿设置的数值。据说在某些网站中是不能用failurelimit选项来控制加载行为的，

类似功能开发案例：帝国CMS百度MIP改造newstext正则表达式

1、打开/e/class/userfun.php添加处理函数：

function NewsTextReplace($add){
    $add['newstext'] = preg_replace('/<img.*?src="(.*?)".*?>/is', '<mip-img alt="" src="$1"></mip-img>', stripslashes($add['newstext']));
    $add['newstext'] = preg_replace('/<a.*?href="(.*?)".*?</a>/is', '<a data-type="mip" data-title="' . $add['title'] . '" href="$1"></a>', $add['newstext']);
    $add['newstext'] = addslashes($add['newstext']);
    return $add;
}

2、打开/e/action/show.php搜索 $GLOBALS['navclassid'] = $r['classid']; 在前面添加代码：

$r = NewsTextReplace($r);

此函数可以处理所有此信息的字段内容。

类似功能开发案例：帝国CMS多终端手机版内容图片压缩

PC端下上传的内容图片一般比较大，在移动端下加载会很慢，此时我们需要把这些图片处理下

那么可以借助PHP的函数 preg_replace_callback：函数执行一个正则表达式搜索并且使用一个回调进行替换。

把代码放到userfun.php中，在show.php里打开对应的位置放置即可。

function NewsTextReplace($add){
$add['newstext'] = preg_replace_callback(
'/<img.*?src="(.*?)".*?>/is',
function ($callback) {
return '<img src="' . sys_ResizeImg($callback[1], 370, 200, 3) . '" width="100%">';
},
stripslashes($add['newstext'])
);
$add['newstext'] = addslashes($add['newstext']);
return $add;
}