Lazy loading
1.1 What is lazy loading
Lazy loading, also known as lazy loading, refers to lazy loading of images in long web pages, and is a good way to optimize web page performance. Before the user scrolls to them, images outside the visible area will not load. This is the opposite of image preloading. Using lazy loading on long webpages will make the webpage load faster. In some cases, it can also help reduce server load. It is often used in the scene of e-commerce websites with many pictures and long pages.
1.2 Why use lazy loading
- It can improve the user's experience. Imagine that when a user opens a long page like Taobao on a mobile phone, if all the pictures on the page need to be loaded, the user will inevitably complain because of the large number of pictures and the long waiting time. Seriously affect the user experience.
- Reduce the loading of invalid resources, which can significantly reduce the pressure and traffic of the server, and can also reduce the burden on the browser.
- To prevent too many resources loaded concurrently will block the loading of js and affect the normal use of the website.
- Only request image resources after the image enters the visible area
1.3 Implementation principle
First set the src attribute of the image on the page to an empty string, and the real path of the image is set in the data-original attribute, listen to scroll, and in the callback of the scroll event, to determine whether our lazy loaded image can enter In the visible area, if the picture is set in the visible area with the src attribute of the picture as the value of data-original, then lazy loading can be achieved.
<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"/>
<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>4. Preload
4.1 What is preloading
Resource preloading is another performance optimization technique that we can use to inform the browser that certain resources may be used in the future. In simple terms, pre-loading is to load all required resources in advance to the local request, so that when it is needed later, it will directly fetch resources from the cache to improve the user experience.
4.2 Why use preloading
Before all web pages are loaded, some main content is loaded to provide users with a better experience and reduce waiting time. Otherwise, if the content of a page is too large, the page without pre-loading technology will be blank for a long time until all the content is loaded.
For example, in the implementation of a winning carousel, when you go to that tab, you need to replace it with the winning picture. If there is no pre-loading, then a white screen may appear when this moment passes, which is very poor.
4.3 Implementation method
- Use HTML tags
- Use the Image object
- The use of XMLHttpRequest object, although there are cross-domain problems, but it will finely control the preloading process
- Use PreloadJS library
3. Comparison of lazy loading and preloading
Both are effective ways to improve the performance of the page. The main difference between the two is that they are loaded in advance and the other is slow or not loaded. Lazy loading has a certain stress relief effect on the front end of the server, and pre-loading will increase the pressure on the front end of the server .
