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

作者: 路羽

全网最全的网络资源分享网站

手机扫码查看

标签:

图片懒加载

路羽资源网 每日一分享

  一开始用的是emlog插件中心的图片延时加载整站延时加载的插件,由于是全站图片懒加载,一些功能的图片也懒加载效果就不太好,就停用了插件,用了以下方法来实现懒加载。当然这些方法不止适用于emlog系统,还适用其他网站。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='https:你的域名/lazyload.gif' data-echo="<?php echo $img_url;?>" 

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



文件下载

附件:Emlog网站图片实现懒加载特效(延时加载)

文件大小:

更新时间:

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

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享到:
打赏
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽资源博客
原文地址: 《Emlog网站图片实现懒加载特效(延时加载)》 发布于2020-10-21

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏