(编辑:jimmy 日期: 2024/10/30 浏览:2)
懒加载技术
懒加载(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指向的是真正的图片地址。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源