前端性能优化之懒加载，预加载
2019-05-15 本文已影响0人
zxhnext
一、懒加载
这里以手机淘宝为例，我们并不需要在进入页面时显示所有资源，当用户下拉时我们再展示后续内容：
我们来做一个demo如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<link href="./main.css" rel="stylesheet" />
</head>
<body>
<div class="image-list">
<img src="" class="image-item" lazyload="true" data-original="https://cdn.jizhangapp.com/number-buy/images/avatar1.png" />
<img src="" class="image-item" lazyload="true" data-original="https://cdn.jizhangapp.com/number-buy/images/avatar1.png" />
......
</div>
<script src="./lazyload.js"></script>
</body>
</html>
lazyload.js
image.png
我们也可以引用zepto.lazyload.js包帮我们实现：
image.png
image.png
二、预加载
当需要图片内容很多时(比如游戏)，我们需要先把图片文件全部加载一下，然后再进入页面
预加载的有三种实现方式：
- 直接使用img标签引入，并设置
display:none -
使用image对象
image.png
-
使用ajax请求 优点，可以监控，缺点，存在跨域
image.png
我们也可以使用preload.js帮我们实现预加载
image.png
设置为false代表使用img标签方法，不设就使用xmlhttp方法
