For the current picture lazy loading, we generally use is achieved by third-party libraries or lazy load library, but a significant problem with this method is that you must perform in order:
1, load the initial response of HTML content
2, lazy loading to load the library
3, Load picture
If the browser can directly support lazy loading, it is the best, the idea is not impossible Oh! Chrome 75 from the start, we can switch two switches to manually enable lazy loading features, the latest Chrome will likely default on lazy loading feature, that is to say we do not have to manually set up. (Note that this is only when it comes to the Chrome browser oh)
loading characteristics of principle:
Native lazy loading feature uses a preflight request to obtain before 2048 bytes of data image files . The data acquired in advance, the browser will try to determine the size of the image, the first (if the picture size is less than 2KB, a preflight request enough) or after the second request is completed, a complete image is loaded, it will lift the load event listener.
We can be judged by a script whether the browser supports lazy loading feature, if supported, can write directly on the loading in the img tag and set the relevant values can easily implement lazy loading, loading three values are auto (default value the browser to decide whether to enable lazy loading), eager (direct load the picture), lazy (lazy loading turned on).
Use the following script to determine whether the browser supports native lazy loading functionality:
<script>
if("loading" in HTMLImageElement.prototype){
alert("支持");
}else{
alert("不支持，你可能需要引入懒加载库来实现懒加载");
}
</script>If so, we can specify a value for the loading in the img tag:
<img src="" alt="浏览器自行决定是否启用懒加载" loading="auto">
<img src="" alt="浏览器立即加载该图片" loading="eager">
<img src="" alt="浏览器使用懒加载" loading="lazy">
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）