统计
  • 建站日期:2021-03-10
  • 文章总数:278 篇
  • 评论总数:1 条
  • 分类总数:21 个
  • 最后更新:11月17日
文章 技术代码

网站图片实现懒加载特效(延时加载)

小椿
首页 技术代码 正文

用了以下方法来实现懒加载。当然这些方法不止适用于emlog系统,还适用其他网站。
需要准备:下载懒加载js、默认懒加载图片、找到模板hearder.php、foot.php、图片显示代码

步骤一:将以下代码填入模板文件foot.php里/body标签前

<!--lanj-->
<script src="http://你的域名/lazyload.js"></script>
<script>
echo.init({
  offset: 100,
  throttle: 250,
  unload: false,
  callback: function (element, op) {
    console.log(element, 'has been', op + 'ed')
  }
});// ***图片懒加载***//
</script>
<!--lanj-->

步骤二:将以下代码填入模板文件hearder.php里/body标签前

<script src="http://你的域名/lazyload.js"></script>

步骤三:将以下代码填入图片显示的地方
一般在module.php里面添加
找到以下字符<?php echo $img_url;?>
添加后为

<img src='http://你的域名/lazyload.gif' data-echo="<?php echo $img_url;?>" 

最后:
何为图片延时加载?能产生什么作用?

  1. 智能隐藏用户看不到的图片。
  2. 页面打开速度加快。 因为隐藏部分用户第一屏幕看不到的图片。
  3. 降低服务器CPU。提升服务器性能。减轻了服务器的同时访问的压力。
  4. 加大带宽,节省流量。对于用户看不到的图片智能隐藏。对于包月流量站长的福音,图片多的网站使用效果拔群!
  5. 滚动页面主动加载被隐藏的图片。
  6. 良好的用户体验。仿各大门户网站新闻或者产品介绍中,图片是在下拉滚动条时加载,很不错的用户体验。

js懒加载

来源:城通网盘|   密码:9092|   大小:148 KB|   下载次数:10次

图懒加载非件实现教程

来源:城通网盘|   密码:9092|   大小:680 KB|   下载次数:10次

版权声明 1 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/236.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
emlogpro文章隐藏评论&登录插件
« 上一篇
CSS颜色代码对照表
下一篇 »