免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: 关于在模板中使用图片懒加载，需要时在加载图片 [打印本页]

作者: admin 时间: 2023-3-23 14:50
标题: 关于在模板中使用图片懒加载，需要时在加载图片
关于在模板中使用图片懒加载，浏览器滚动到指定位置时在加载图片，不需要时不加载图片。加快网页打开速度。

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

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

模板中创建懒加载

<script type="text/javascript">
$(document).ready(function() {
$("img").lazyload({
effect: "fadeIn",
threshold: 100
});
});
</script>

复制代码

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

[.ourphp form="article" row="3" lang="cn" id="0" type="op" name="ourphp".]
<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="'.]

欢迎光临免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://www.ourphp.net/club/)