HTML5+CSS3+JavaScript Web前端开发案例教程课件：图片懒加载.pptxVIP

图片懒加载

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：图片懒加载核心功能：图片滚动加载优先显示可视区域的图片而不一次性加载所有图片

案例介绍图片懒加载效果

02技术准备

技术准备FunLazy插件简介：为了更便捷地实现图片懒加载的特效，我们需要用到一个开源插件，即FunLazy插件。FunLazy是一个无任何依赖的轻量级图片懒加载插件，可完美支持主流的现代高级浏览器，组件会优先使用IntersectionObserverAPI，以此提高懒加载的性能。gitee地址：

技术准备在使用FunLazy组件之前，需要先在HTML文件中引入funlazy.js文件。示例代码：scriptsrc=funl/script

技术准备直接使用FunLazy()函数实现页面中的图片懒加载。示例代码：imgdata-funlazy=1.jpgwidth=500height=309imgdata-funlazy=2.jpgwidth=500height=309imgdata-funlazy=3.jpgwidth=500height=309scriptFunLazy();/script

技术准备通过FunLazy()函数提供的参数对象实现图片懒加载的配置。示例代码：FunLazy({placeholder:thumb.jpg,effect:fadeIn});

技术准备FunLazy插件支持的配置参数：container，目标容器的选择器；effect，图片显示效果，可选值show/fadeIn；placeholder，占位图片；threshold，边界值，单位px；width，图片宽度；height，图片高度；axis，容器滚动方向，可选值：x,y；eventType，指定加载图片的鼠标事件，可选值：click,dblclick,mouseover； onSuccess，图片加载成功时执行的回调函数；onError，图片加载失败时执行的回调函数；strictLazyMode，严格懒加载模式；beforeLazy，在进行懒加载操作前执行的函数；autoCheckChange，自动检测目标元素内需要进行懒加载操作的元素的变化；useErrorImagePlaceholder，当图片加载失败时，使用指定的图片进行占位显示。

03案例实现

案例实现文件结构：