当前位置:网站首页>图片懒加载的方案
图片懒加载的方案
2022-07-05 10:21:00 【码小龙.】
图片懒加载的方案
前言
图片懒加载是前端性能提升的重要方面之一,其主要的用途是: 减少网络加载,提升体验。
但为了影响体验,你需要最好写好布局样式,最好写好占位图。
懒加载的原理
其实图片的加载主要是因为图片的src引起的,而如果我们想要实现懒加载,就避免src路径的加载即可,我们可以将图片的路径存储到data-src的自定义数据属性上,然后在需要的时候按需加载。
按需加载的实现方式有两种:这里重点说第一种,目前在移动端以及在pc的瀑布流布局中都是第一种居多。
1 滚动到页面底部加载
2 分页加载
滚动到页面底部加载的原理
原来的方式:滚动监听
其主要实现的原理是对滚动事件的监听,当发现滚动条高度+滚动条高度等于document的高度时,就是达到页面的底部了,需要重新加载图片的时机。
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ if((window).scrollTop() + ( w i n d o w ) . h e i g h t ( ) > = (window).height()>= (window).height()>=(document).height()){
var $div = ‘
- append添加的节点
- ’;
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲container').app…div)
}
});
新的方式:IntersectionObserver
我们去看下jq的lazyload的源码是如何写这部分函数的,核心是依赖IntersectionObserver,是检测元素是否进入视图,如果有进入,那么就会移除其lazy的class,其源码地址:链接
document.addEventListener(“DOMContentLoaded”, function() {
var lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));
if (“IntersectionObserver” in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove(“lazy”);
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to a more compatible method here
}
});
边栏推荐
- How to plan the career of a programmer?
- 脚手架开发进阶
- SQL Server 监控统计阻塞脚本信息
- AtCoder Beginner Contest 258「ABCDEFG」
- Atcoder beginer contest 254 "e BFS" f st table maintenance differential array GCD "
- Secteur non technique, comment participer à devops?
- flink cdc不能监听mysql日志,大家遇到过这个问题吧?
- [vite] 1371 - develop vite plug-ins by hand
- 函数///
- Completion report of communication software development and Application
猜你喜欢
Learning note 4 -- Key Technologies of high-precision map (Part 2)
【Vite】1371- 手把手开发 Vite 插件
csdn软件测试入门的测试基本流程
5g NR system architecture
Atcoder beginer contest 254 "e BFS" f st table maintenance differential array GCD "
How does redis implement multiple zones?
【DNS】“Can‘t resolve host“ as non-root user, but works fine as root
Apple 5g chip research and development failure? It's too early to get rid of Qualcomm
Events and bubbles in the applet of "wechat applet - Basics"
IDEA新建sprintboot项目
随机推荐
websocket
Have the bosses ever encountered such problems in the implementation of flinksql by Flink CDC mongdb?
Livedata interview question bank and answers -- 7 consecutive questions in livedata interview~
What are the top ten securities companies? Is it safe to open an account online?
[paper reading] ckan: collaborative knowledge aware autonomous network for adviser systems
官网给的这个依赖是不是应该为flink-sql-connector-mysql-cdc啊,加了依赖调
How to judge that the thread pool has completed all tasks?
请问postgresql cdc 怎么设置单独的增量模式呀,debezium.snapshot.mo
C language QQ chat room small project [complete source code]
> Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
SLAM 01.人类识别环境&路径的模型建立
Events and bubbles in the applet of "wechat applet - Basics"
TypeError: Cannot read properties of undefined (reading ‘cancelToken‘)
In wechat applet, after jumping from one page to another, I found that the page scrolled synchronously after returning
风控模型启用前的最后一道工序,80%的童鞋在这都踩坑
【js学习笔记五十四】BFC方式
WorkManager学习一
leetcode:1200. 最小绝对差
C语言实现QQ聊天室小项目 [完整源码]
重磅:国产IDE发布,由阿里研发,完全开源!