浏览器的 5 种观察器
前言“图片懒加载”,这个词语想必大家再熟悉不过了。传统的实现方法是,监听scroll事件,获取img元素相对于视口的顶点位置el.getBoundingClientRect().top,只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域,当图片进入可视区域时再去加载图片资源。
这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题。
目前浏览器API中的 IntersectionObserver 交叉观察器,可自动"观察"目标元素与根元素的交叉区域的变化,以此判断元素是否可见。利用这个方法,在观察到元素可见时,再去加载图片资源。这样“图片懒加载”实现起来就很容易了。
当然浏览器的观察器,不仅IntersectionObserver这一种。下面我们依次介绍下浏览器5种观察器的基本用法,以及它们的应用。
首先来看一下,什么是浏览器的观察器?
一、什么是浏览器的观察器?针对一些不是由用户直接触发的事件,比如DOM元素从不可见到可见、DOM大小、属性的改变和子节点个数的修改等,浏览器提供特定的api去监控这些变化,这些api就是浏览器的观察器 ...
SpringBoot统一响应及全局异常处理框架 -- lihansir-spring-boot-starter
Make the development of API services faster and more efficient (Only for springboot)1、If you want to use request uniform responseIntroducing dependencies to your pom.xml
12345<dependency> <groupId>com.lihansir.platform</groupId> <artifactId>lihansir-spring-boot-starter</artifactId> <version>${latest version}</version> </dependency>
click here to find the latest version
Alternate link
Just need two annotation
12@EnableRestResult ...
SpringBoot 解决跨域问题
1、@CrossOrigin注解解决跨域
123456@GetMapping("/hello")@ResponseBody@CrossOrigin(value = "*")public String hello() { return "hello";}
2、接口编程
123456789101112@Configurationpublic class WebConfigurer implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .allowCredentials(true) .allowedOriginPatterns("*") ...
Feign Post 请求参数拼接在 url 后导致 url 过长解决方案
1、注册一个Encoder的Bean
1234567891011121314151617181920212223@Configurationpublic class FeignClientFormPostConfig { private ObjectFactory<HttpMessageConverters> messageConverters; // new一个form编码器,实现支持form表单提交 // 注意这里方法名称,也就是bean的名称是什么不重要, // 重要的是返回类型要是 Encoder 并且实现类必须是 FormEncoder 或者其子类 @Bean public Encoder feignFormEncoder() { return new FormEncoder(new SpringEncoder(this.messageConverters)); } @Autowired public void setMessageConverters(ObjectFactory<HttpM ...
npm link 本地包调试
介绍根据文档介绍,包的链接分为两步。
第一步在一个包文件夹内执行 npm link 将在全局文件 {prefix}/lib/node_modules/ 内,创建一个符号链接(symlink),这个链接指向 npm link 命令执行的地方。
第二步到其它目录下,执行 npm link packageName 命令,将会创建一个从全局安装的 packageName 到当前文件内的 node_modules 下的符号链接。
需要注意的的是, packageName 是取自包的 package.json 中 name 字段,不是文件夹名称。
包的名称可能有作用域前缀,如果有, packageName 也要对应加上。
实践基于文档,结合实际的操作,对照看下产生的效果。
运行环境
项目是基于 webpack 简单配置,本地运行的 server 。
node 使用 nvm 管理的。
项目已引用了包 ...