懒加载使用场景
- 图片进入可视区域之后请求图片资源
- 对于电商等图片很多,页面很长的业务场景适用
- 减少无效的资源的加载
- 并发加载的资源过多会阻塞js 的加载,影响网站的正常使用
预加载的使用场景
- 图片等静态资源在使用之前就提前请求
- 资源使用到的时候能从缓存中加载, 提升用户体验
- 页面展示的依赖关系维护
比如Angular中就提供了懒加载 主要通过路由配置#module . 预加载,是一种预加载PreloadStrategy 服务. Angular 中更多的是模块之间的懒加载和预加载的过程
懒加载
懒加载的原生实现
当我们的图片进入可视区域,去请求资源
需要去监听scroll事件,在scroll事件的回调中,去判断我们的懒加载的图片是否进入可视区域.
js代码
var viewHeight = document.documentElement.clientHeight;//可视区域高度
function lazyLoad(){
var eles = document.querySelectorAll('img[data-original][lazyload]');
Array.prototype.forEach.call(eles,function(item,index){
var rect;
console.log(item);
console.log(item.dataset);//原生js 写的不多,原来还有这样用法
if(item.dataset.original ===''){
return ;
}
rect = item.getBoundingClientRect();//这个也是刚学到的.
if(rect.bottom >= 0 && rect.top < viewHeight){
!function(){
var img = new Image();
img.src = item.dataset.original;
img.onload = function(){
item.src = img.src;
}
item.removeAttribute('data-original');
item.removeAttribute('lazyload');
}()
}
}
)
}
lazyLoad(); //页面初始化需要加载一次
document.addEventListener("scroll",lazyLoad);
学习到两句话:
第一句: 是item.dataset 本身取到的是DOMStringMap 对象
新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。
其实这么写 data-original就是给元素设置了一个属性, getAttribute 和 setAttribute 同样可以用 . 因为data 属性的支持情况在IE上很糟糕 ,呵呵, 因此，如果要考虑兼容性，可以考虑利用 getAttribute、setAttribute存取dataset
第二句话是
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1.语法：这个方法没有参数。rectObject = object.getBoundingClientRect();
2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
这个支持比较好 ie4以上,
css 代码
重要的是给item 设置一个高度, 如果没有的话. 懒加载就不成功了.因为初始化的时候他们没有占位置, 高度都是零. 都满足了rect.top < viewHeight .全部都会加载出来.
.image-item{
width:40%;
margin-right:5%;
display: inline-block;
height:400px;
background:grey;
}
.image-list {
margin-left: 5%;
}
html代码 ,图片我是从淘宝随便找的, 能显示出来就行.
<div class="image-list">
<img class="image-item" src= "" lazyload="true" data-original="//img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i4/1971631275/O1CN011LHzQvuBPlCLFdg_!!1971631275.jpg_430x430q90.jpg">
<img class="image-item" src= "" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/38832490/O1CN011UGSeYa6uu2fbWJ_!!38832490.jpg_400x400.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i1/2300650542/O1CN011FsH8Ctmua87iKG_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i1/3262708088/O1CN0129cLqPxFvAzV4xr_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search2.alicdn.com/img/bao/uploaded/i4/i1/2735225488/O1CN011qPY4L3OPAQeN9S_!!2735225488.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i4/1646111836/O1CN011PQvdX5eLy7Oc90_!!1646111836.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i2/2866189752/TB2BiKXX49YBuNjy0FfXXXIsVXa_!!2866189752.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i4/520233987/TB2Usn1tamWBuNjy1XaXXXCbXXa_!!520233987.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i2/14738023913022489/T1EBO0Xu0gXXXXXXXX_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i1/714469648/TB1SN9KXFyZBuNjt_jJXXbDlXXa_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/1330406085146611155/TB2jcQRBdRopuFjSZFtXXcanpXa_!!0-saturn_solar.jpg_200x200.jpg">
<img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i3/872172049/TB2QxUFcwHqK1RjSZFPXXcwapXa_!!872172049-0-item_pic.jpg_360x360Q90.jpg_.webp">
</div>
<script src="./lazyload.js"></script>
预加载
四种方式
- 引用一个图片, display 设置为none
- 在js 中创建new Image() 然后给 img 设置src
- xmlHttpRequest 异步请求. 优点: 可以监控Process 比如现在已经加载了多少.便于操控, 缺点有跨域问题.
4.使用其他库 比如Preload.js , 这个其实原生也是用src 或者 xmlHTTPRequest实现,默认是XMLHTTPRequest,
第一个就不举例子了.
第二个 在js 中这么写. 浏览器就会请求加载图片资源
var img = new Image();
img.src = "https://img.alicdn.com/imgextra/i4/38832490/O1CN011UGSeYa6uu2fbWJ_!!38832490.jpg_400x400.jpg_.webp";
第三个:
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.onprogress = progressCallback;
xmlHttpRequest.open("GET","https://img.alicdn.com/imgextra/i4/1330406085146611155/TB2jcQRBdRopuFjSZFtXXcanpXa_!!0-saturn_solar.jpg_200x200.jpg",true);
xmlHttpRequest.responseType = "blob";
xmlHttpRequest.send();
function callback(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
//在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，
// 即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，
// 每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，
// 但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
};
img.src = window.URL.createObjectURL(blob); //创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
// 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
console.log(img);
document.body.appendChild(img);
}else{
console.log("Request was unsuccessful:" + xmlHttpRequest.status);
}
}
function progressCallback(e){
e = e || event;
if(e.lengthComputable){
console.log("Received " + e.loaded + " of " + e.total + " bytes");
}
}
看一下
在html中的效果
生成的效果.png
