el-table 懒加载不触发合计_Angular-懒加载第三方

在开发应用时，有些功能不太常用但却必须有（比如编辑器）。直接集成到项目里又会增加主包(main.js)的大小。为了避免这些问题，通过懒加载的方式似乎比较好。

具体实现请看线上例子：angular-lazy-loading-lib-lddvq1f - StackBlitz，代码比较简单就不赘述了。只提几点关键的。

以rxjs的ReplaySubject实现: https://rxjs-dev.firebaseapp.com/api/index/class/ReplaySubject

A variant of Subject that "replays" or emits old values to new subscribers. It buffers a set number of values and will emit those values immediately to any new subscribers in addition to emitting new values to existing subscribers.

private loadedLibraries: { [url: string]: ReplaySubject<any> } = {};

2. 当然若请求资源发生了异常则需要捕获，所以使用了原生的XMLHttpRequest来预先请求。

private _load(url: string, cb: (replaySubject$: ReplaySubject<any>) => Element): Observable<any> {if (this.loadedLibraries[url]) {return this.loadedLibraries[url].asObservable();}const element = cb(this.loadedLibraries[url] = new ReplaySubject());// 骚操作,先用原生方法获取url的资源，若失败则返回错误// https://stackoverflow.com/questions/28556398/how-to-catch-neterr-connection-refusedreturn new Observable((ob: Observer<any>) => {request(url).then(() => {this.document.body.appendChild(element);// 加载js或css触发onload后this.loadedLibraries[url].subscribe(() => {ob.next('');ob.complete();});}).catch(err => {this.loadedLibraries[url] = null;// 这里可以弹窗提示刷新或者手动再次调用加载等等操作console.error('LazyLoadingLibService error', err);ob.error(err);ob.complete();});});}

3.加载js

public loadJS(url: string): Observable<any> {return this._load(url, (replaySubject$: ReplaySubject<any>) => {const script = this.document.createElement('script');script.type = 'text/javascript';script.src = url;script.onload = () => {replaySubject$.next('');replaySubject$.complete();};return script;});}

4. 第三方库的引用地址：https://unpkg.com/ ，如果你不想打包那么多的js，那么这个地址将会有所帮助。

5. 当然这样的操作是有弊端的，就是没有代码提示的。不过用得少也不纠结了。

参考地址：

https://stackoverflow.com/questions/46240293/how-to-lazyload-library-in-angular-4-module

el-table 懒加载不触发合计_Angular-懒加载第三方相关推荐

html资源加载前触发事件,jquery页面加载时触发ready()事件
ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行.此外,下列写法是相等的: $(doc ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
什么是hibernate懒加载？什么时候用懒加载？为什么要用懒加载？
所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有 ...
Selenium一些特殊情况的处理：失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
Selenium一些特殊情况的处理失去焦点focus 有时候click()或者send_keys(),没有反应.那是因为失去了焦点.使用driver. switch_to_active_elemen ...
【vue-treeselect】数据量大的时候懒加载并且可以搜索，树懒加载+搜索
这两天快被这个懒加载加搜索搞崩溃了今天小有收获,后面优化了再更新主要说一下一棵树如何懒加载和搜索 1.ref不解释了,和本次代码无关 2.normalizer格式化内容不重要 3.load-opt ...
iframe懒加载_如何实现图片懒加载
背景图片懒加载是针对图片加载时机的一种优化,在一些图片量比较大的网站(比如电商网站首页,或者团购网站.小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白 ...
什么事图片懒加载？如何实现图片懒加载？
随着移动设备和网络技术的不断发展,网页设计也在不断地进化.其中,一项重要的技术就是图片懒加载(Lazy Load),它可以提高网站的加载速度和用户体验.本文将深入探讨图片懒加载的定义.原理.优势.实现 ...
python怎么加载图片-python爬虫--图片懒加载
图片懒加载是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...
mysql 懒加载数据_jpa如何懒加载大字段，懒加载之后又如何获取懒加载字段
前言:对于大字段,我们在查询列表的时候不需要查询,但是修改的时候有需要展示大字段内容,怎么办问1.jpa如何懒加载大字段?即查询列表的时候不查询出来问2.懒加载之后又如何获取懒加载字段.比如,在后 ...
Java 单例模式：懒加载（延迟加载）和即时加载
Java 单例模式:懒加载(延迟加载)和即时加载引言在开发中,如果某个实例的创建需要消耗很多系统资源,那么我们通常会使用惰性加载机制(或懒加载.延时加载),也就是说只有当使用到这个实例的时候才会创 ...

el-table 懒加载不触发合计_Angular-懒加载第三方

el-table 懒加载不触发合计_Angular-懒加载第三方相关推荐

最新文章

热门文章