关于在模板中使用图片懒加载，需要时在加载图片

关于在模板中使用图片懒加载，浏览器滚动到指定位置时在加载图片，不需要时不加载图片。加快网页打开速度。

OURPHP默认手机端模板中，商城模块默认是有图片懒加载的，如果使用其它开发者的模板没有的话，可以自已添加。

如下：
模板中要引入JQ
/function/plugs/jquery/2.1.1/jquery-2.1.1.min.js
引入懒加载
/function/plugs/lazyload/jquery.lazyload.js

模板中创建懒加载

1. <script type="text/javascript">
   
2. $(document).ready(function() {
   
3.         $("img").lazyload({
   
4.                 effect: "fadeIn",
   
5.                 threshold: 100
   
6.         });
   
7. });
   
8. </script>

复制代码

这样就完成了懒加载的引入，HTML代码要改一下
例如：

1. [.ourphp form="article" row="3" lang="cn" id="0" type="op" name="ourphp".]
   
2. <li><a href="[.$ourphp.url.]" title="[.$ourphp.title.]"><img src="/skin/noimage.png" data-original="[.$ourphp.minimg.]">[.$ourphp.title.]</a>

复制代码

用data-original替换原来的src来加载图片链接。（但是原来的src="/skin/noimage.png" 必须存在）




编辑器上传的图片，在模板中修改标签
例如：
[.$opcms.content|replace:'src="':'src="/skin/noimage.png" data-original="'.]


手机端
[.$opcms.content_wap|replace:'src="':'src="/skin/noimage.png" data-original="'.]