蓝海之都

服务器加速设置完了 我们就开始折腾网页篇了。

影响速度的基本就是图片和外链脚本。

外链脚本我们下载到自己服务器就可以。图片的可优化的就多了。

1. 首页 列表等调用小图的部分使用后台插件中的略缩图插件可以减少60%的大小 推荐使用，免费的哦！

2. 图片小了还可以再优化 比如：懒加载、滚屏加载等等 我们这里就是使用滚屏加载，节约的宽带更多 加载的速度更快。

   首页 列表等调用方式：

   比如：原来是 <img src="{$rs.picurl}"> 我们只需要改为：<img src="/public/static/libs/html2canvas/blank.png" data-url="{$rs.picurl}" class="js_imgload"> public/static/libs/html2canvas/blank.png 是一个1x1的图 自己随便设置一个即可。class="js_imgload" 是必须的

   他的样式就一个背景图可以自己加到全局CSS中 随便找一个转圈圈的加载图即可：

   
   

3. .js_imgload {
       background: url(loading.gif) no-repeat center;
   }

   重点就是内容部分了：

   \application\common\fun\Ueditor.php

搜索：return $content; 在第二个的上面加上 改完后记得加锁：

 $content = preg_replace('/<[img|IMG].*?src=[\'|\"](.*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp]))[\'|\"].*?[\/]?>/','<img src="/public/static/libs/html2canvas/blank.png" data-url="${1}" class="js_imgload">',$content);

改完就是如下：

   public static function show($content='',$pagetype=''){
        
        $content = Content::bbscode($content);
        
        if ($pagetype!='show') {
            return $content;
        }
        
        if(strstr($content,'<embed type=')){
            $content = preg_replace_callback('/<embed type="application\/x-shockwave-flash" class="edui-faked-video"([^>]+)src="([^"]+)"([^>]+)>/is',array(self,'get_embed_url'),$content);
        }
        
        if(strstr($content,'<video class="edui-upload-video')){
            $content = preg_replace_callback('/<video class="edui-upload-video([^>]+)>([^<]*)<source src="([^"]+)" type="video\/([^"]+)"\/>([^<]*)<\/video>/is',array(self,'get_video_url'),$content);
        }
       $content = preg_replace('/<[img|IMG].*?src=[\'|\"](.*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp]))[\'|\"].*?[\/]?>/','<img src="/public/static/libs/html2canvas/blank.png" data-url="${1}" class="js_imgload">',$content);
        return $content;
    }

然后就是找到我们的内容父级css的class，比如默认模板是 .ShowContent 搜索下CSS文件你会发现有个

.ShowContent img {

1.    max-width: 100%;

}

我们改为

.ShowContent img {

1.    max-width: 100%;min-height: 200px;

2.  

}

也就是图片需要有个默认最低高度 .

JS记得下载到自己服务器改为自己的地址:

<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js";></script> 

<script type="text/javascript">

$(function() {

$("img.js_imgload").scrollLoading();

});

</script>

至此图片滚动加载就完成了，页面提速十分明显 能明显加速网页和提高负载