幽灵资源网 Design By www.bzswh.com
懒加载技术
懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。
原理:页面加载后只让文档可视区内的图片显示,其它不显示,随着用户对页面的滚动,判断其区域位置,生成img标签,让到可视区的图片加载出来。
所用相关技术:给img加属性 (例如data-src),将图片的地址赋值给他,这样就生成img标签后再把data-src的值赋给img的src(通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src'))。
jqueryLazyload方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding: 0; } .wrap{ overflow: hidden; width:915px; background:#2d2d2d; margin:50px auto; border-radius:10px; /*font-size:0px;*/ } .wrap img{ float:left; display: block; width:280px; height:180px; margin:10px 10px; border:2px solid #7c7c7c; border-radius:10px; } </style> </head> <body> <div class="wrap"> <img src="/UploadFiles/2021-04-02/1.jpg">echo.js方式
echo.js是一款非常简单实用轻量级的图片延时加载插件,如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。当然你完全可以集成到自己项目中去。
下载地址:https://github.com/helijun/helijun/tree/master/plugin/echo
<style> .demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;} </style>
<div class="demo"> <img class="lazy" src="/UploadFiles/2021-04-02/blank.gif"><script src="js/echo.min.js">说明:blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:JS,图片懒加载
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...