页面上的图片太多?快试试懒加载! 秒速五厘米 2022-06-11 01:11 41阅读 0赞 ` 今天在项目开发的过程中,调用后台提供的一个接口的时候,返回了93张图片,并且每张图片都是700*700,真叫人头大!结果自然是打开页面的时候卡的比较严重。显然,作为一名合格的前端工程师,我们必须采取一些措施,以提高用户体验。 一方面向后台同事反应问题,提醒他们将图片的规格修改成比较小的,另一方面,我们前端也可以通过懒加载来减缓服务器压力,优化网页性能。就算是后台提供的图片很小,一下子加载那么多图片,用户的手机也会受不了,卡顿就在所难免了。 下面介绍一种比较简单的懒加载方案:使用echo.js来实现懒加载,优化多图片网页的性能。 使用方法: html部分:` <img class="lazy" src="/New_bbc/public/wap/static/images/loading.gif" data-echo='+d.data[i].imgurl+' alt='+d.data[i].name+' /> 注:data-echo 是真正要加载进去的图片 src可以用占位图代替 这里图片路径按照自己的文件夹的来写 css部分: .lazy{width:100%;height:100%;background: url('../images/loading.gif') center center no-repeat;} js部分:先引入文件 <script type="text/javascript" src="__STATIC__/js/echo.js"></script> //设置懒加载的参数 echo.init({ offset: 740,//离可视区域多少像素的图片可以被加载 throttle: 150 //图片延时多少毫秒加载 }); OK,自此我们就完成了使用echo.js来实现懒加载的过程,懒加载就是这么简单。
相关 图片懒加载 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmds 青旅半醒/ 2022年11月16日 13:41/ 0 赞/ 321 阅读
相关 图片懒加载 function lazyLoadImg() { var img = document.getElementsByTagName('img'); s 谁践踏了优雅/ 2022年09月28日 13:05/ 0 赞/ 382 阅读
相关 图片懒加载 在一个项目中,如果同时加载的图片太多的话,会导致页面卡顿,这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件,先加载出前面几张图片,然后当滚动条滚动的时候再依次加 分手后的思念是犯贱/ 2022年06月17日 13:49/ 0 赞/ 165 阅读
相关 图片懒加载 1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading 缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 484 阅读
相关 页面上的图片太多?快试试懒加载! ` 今天在项目开发的过程中,调用后台提供的一个接口的时候,返回了93张图片,并且每张图片都是700700,真叫人头大!结果自然是打开页面的时候卡的比较严重。显 秒速五厘米/ 2022年06月11日 01:11/ 0 赞/ 42 阅读
相关 图片懒加载 懒加载的意义[(在线demo预览)][demo] 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等,但是 痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 526 阅读
相关 图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度, 偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 549 阅读
相关 图片懒加载 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<me 亦凉/ 2022年05月23日 12:19/ 0 赞/ 484 阅读
相关 图片懒加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 527 阅读
相关 图片懒加载 \[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/ 川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 844 阅读
还没有评论,来说两句吧...