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='http://你的域名/lazyload.gif' data-echo="<?php echo $img_url;?>"
最后:
何为图片延时加载?能产生什么作用?
1. 智能隐藏用户看不到的图片。
2. 页面打开速度加快。 因为隐藏部分用户第一屏幕看不到的图片。
3. 降低服务器CPU。提升服务器性能。减轻了服务器的同时访问的压力。
4. 加大带宽,节省流量。对于用户看不到的图片智能隐藏。对于包月流量站长的福音,图片多的网站使用效果拔群!
5. 滚动页面主动加载被隐藏的图片。
6. 良好的用户体验。仿各大门户网站新闻或者产品介绍中,图片是在下拉滚动条时加载,很不错的用户体验。
 
 
 
js下载:抱歉,隐藏内容 回复 后刷新可见
 
 
Emlog文章图片实现懒加载特效(延时加载)-五行资源分享网-第1张图片
分享到:
打赏
未经允许不得转载:

作者: 五行, 转载或复制请以 超链接形式 并注明出处 五行资源分享网
原文地址: 《Emlog文章图片实现懒加载特效(延时加载)》 发布于2022-4-14
帖子声明: 本站对文章进行整理、排版、编辑,是出于传递信息之目的, 并不意味着赞同其观点或证实其内容的真实性,不拥有所有权,不承担相关法律责任。

评论

为了防止灌水评论,登录后即可评论!
  1. #1
      游客

    看看


 

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

微信扫一扫打赏