济南网站seo报价结构设计在哪个网站接单兼职做

济南网站seo报价,结构设计在哪个网站接单兼职做,wordpress如何添加远程数据库,企业建设高端网站的目的利用MutationObserver+IntersectionObserver实现图片懒加载 前言 图片懒加载这并不陌生，对于前端性能优化来讲这是必经之路， 我们之前做图片懒加载都是用滚动监听实现，核心逻辑是监听scroll/resize/load事件-防抖后遍历所有懒加载图片-通过getBoundingClientRect()…利用MutationObserver+IntersectionObserver实现图片懒加载前言图片懒加载这并不陌生，对于前端性能优化来讲这是必经之路，我们之前做图片懒加载都是用滚动监听实现，核心逻辑是监听scroll/resize/load事件-防抖后遍历所有懒加载图片-通过getBoundingClientRect()计算图片位置，判断是否进入视口-加载图片伪代码window.addEventListener('scorll',debounce(()={document.querySelectorAll('img[data-lazy-src]').forEach(img={constrect=img.getBoundingClientRect()if(rect.topwindow.innerHeight+200rect.bottom0){img.src=img.dataset.lazySrc}})}))这么做可以实现么，可以，但是有没有缺点呢，有高消耗，scroll事件高频触发，及时使用了防抖，仍有频繁执行；且每次触发需要遍历所有懒加载图片，调用getBoundingClientRect;无法自动停止监听，及时图片已加载，仍会参与遍历动态图片无法覆盖，无法捕获异步新增的图片，需要手动调用检查函数开发成高，需要手动实现防抖、视口判断、边界条件（如提前加载、窗口缩放）;需要手动处理动态图片，容易遗漏动态图片；需要手动避免重复加载精度低，视口判断依赖getBoundingClientRect(),受CSS变形，滚动条等影响，容易计算错误；稳定性差，因为有防抖延迟，可能导致图片延迟加载，高频滚动是js阻塞，可能导致页面卡顿等等，会有一系列的问题，而这些问题的根源在于判断图片是否进入视口时需要用scroll去监听那有没有不需要通过scroll去监听就能判断图片是否进入视口的方法呢，真好，还真有这个玩意叫InterSectionObserver，翻译为交叉观察器IntersectionObserver这是个啥玩意呢，他的作用就是目标元素与视口产生一个交叉区，看看这个交叉区的比率是多少，如果是0，则不可见，100则完全可见（0-100）则部分可见怎么用呢，直接上代码constobserver=newInterSectionObserver((entries,observer)={entries.forEach(entry={if(entry.inIntersecting){console.log('元素进入视口')}})})observer.oberve(document.qerySelector('target'))构造函数new IntersectionObserver(callback,options),callback是回调函数options是配置项主要有三个配置项，root，相对哪个容器进行检测rootMargin,扩展和收缩检测区域,可以理解为预支量，做预加载使用threshold，触发回调的交叉比例参数类型默认值说明rootElement nullnull（viewport）相对哪个容器检测（如滚动容器）rootMarginstring“0px”扩展/收缩检测区域（类似 margin，支持百分比）hresholdnumber number[]0触发回调的交叉比例（0~1 或 [0, 0.5, 1]）callback中（entry）的信息如下time:45325//触发时间rootBounds:DOMRectReadonly//root的边界boundingClientRect:DOMRect//目标元素边界intersectionRect:DOMREct//交叉区域intersectionRatio：05//交叉比例isIntersecting:true//是否相交intersectionRatiothresholdtarget:element//被观察者对象讲完了IntersectionObserver，上篇文章我们还讲了MutationObserver，现在用这两个设计一个图片懒加载的实现图片懒加载设计思路我们理一下，我们要干这么几件事创建视口监听器和动态监听器处理页面上初始IMG处理动态新增的IMG上个详细的流程图为了更好的管理和组织，我们可以设计一个类lazyImagesLoder里面有上述的5个基本方法和4个基本属性基本属性包括配置属性config，视口实例intersectionObserver，DOM监听实例mutationObserver以及防止重复监听的容器observedImgs接下来就是代码组织了上代码!-- 懒加载图片：用>imgdata-lazy-src="1.jpg"alt="示例图片1"/imgdata-lazy-src="2.jpg"alt="示例图片2"/!-- 动态生成的图片（也会被监听） --buttononclick="addDynamicImg()"新增图片/button