标签：为什么 dataset 首页 rip 空白 解压 简单 turn 展现
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。
用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。
在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。
首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中。
当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style>
.image-item {
display: block;
margin-bottom: 50px;
height: 200px; //一定记得设置图片高度
}
</style>
</head>
<body>
<img src="" class="image-item" lazyload="true" data-original="images/1.png" />
<img src="" class="image-item" lazyload="true" data-original="images/2.png" />
<img src="" class="image-item" lazyload="true" data-original="images/3.png" />
<img src="" class="image-item" lazyload="true" data-original="images/4.png" />
<img src="" class="image-item" lazyload="true" data-original="images/5.png" />
<img src="" class="image-item" lazyload="true" data-original="images/6.png" />
<img src="" class="image-item" lazyload="true" data-original="images/7.png" />
<img src="" class="image-item" lazyload="true" data-original="images/8.png" />
<img src="" class="image-item" lazyload="true" data-original="images/9.png" />
<img src="" class="image-item" lazyload="true" data-original="images/10.png" />
<img src="" class="image-item" lazyload="true" data-original="images/11.png" />
<img src="" class="image-item" lazyload="true" data-original="images/12.png" />
<script>
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
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)
</script>
</body>
</html>
资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。
否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
<script src="./myPreload.js"></script>
//myPreload.js文件 var image= new Image() image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"
//使用preload.js var queue=new createjs.LoadQueue(); //默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域 queue.on("complete",handleComplete,this); queue.loadManifest([ {id:"myImage",src:"http://pic26.nipic.com/20121213/6168183 0044449030002.jpg"}, {id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526 1931471581702.jpg"} ]); function handleComplete(){ var image=queue.getResuLt("myImage"); document.body.appendChild(image); }
两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
标签：为什么 dataset 首页 rip 空白 解压 简单 turn 展现
原文地址：https://www.cnblogs.com/magicg/p/12840019.html
