小程序实现模糊预加载图片-超详细教程

导语

最近设计了一个小程序，可以显示大量图片。小程序提供了图片的偷懒加载功能。但是由于图片本身比较大，要显示的图片也比较多，如何友好地显示还没有加载的流程是必须要解决的问题。

思路

由于小程序没有提供js对象Image，在小程序中实现预加载不能像原生js那样直接用new Image()创建图片对象，只能在视图层创建图片，通过onLoad事件监控图片加载。

模糊图像加载的思想是先加载一个目标图像的缩略图，通常速度很快，可以忽略。加载缩略图后，它将以高斯模糊显示。同时，将加载原始图像，这将替换原始缩略图。原始图像和缩略图需要设置相同的宽度和高度。思路清晰后，开始编码~

由于项目中使用了Taro框架，下面的代码是用React编写的。原生或其他框架也可以借鉴。没有太大的区别，想法都是一样的。

以下是一些代码

//听原图加载完成ToggleOriginloaded(){这。setstate({ loaded : true })；}//监视器缩略图加载完成ToggleHumbloaded () {this。setstate({ thumbloaded : true })；}render() {let { loaded，thumbLoaded }=this.state让{ imgU，imgW，imgH }=this.props//根据传入的宽度和高度，设置缩略图和原图的宽度和高度Letstyle={width : IMGW' RPX '，height 3360 IMGH ' RPX ' } Return(blockname class name=' image-not-loaded ' style={ object . assign({ display 3360 loaded？none' : 'auto' }，style)} lazyLoadmode=' aspectFill ' onload={ this . togglethumbloaded . bind(this)} src={ compressImage(imgU，' 10x ' parsent(imgH * 10/imgW))}/{ thumbLoaded(Imagestyle={ object . assign({ display 3360 loaded？auto' : 'none' }，style)} lazyloadname=' image-is-loaded ' mode=' aspectFill ' src={ imgU } onLoad={ this . toggleoriginloaded . bind(this)}/)}/Block)；}复制代码上面是主视图层和逻辑层的代码，其中使用了compressImage函数来处理图像裁剪，也就是缩略图的生成。(ps:我们用nginx实现了动态压缩、裁剪等功能，有需要的朋友可以自行搜索相关教程~)

主逻辑处理完成后，我们再来看看模糊样式的处理。在这里，我们将介绍一个css方法blur()。

blur()CSS方法对输出图片应用高斯模糊。其中只有一个接受参数模糊(半径)。

半径表示模糊半径，值为长度。它定义了高斯函数的标准差值，即屏幕上有多少像素相互融合；因此，较大的值会产生更多的模糊性。值为0时，输入保持不变。如果该值为空，则为0。(来自MDN)可以生成类似毛玻璃风格的图片，如下图：

了解了这个方法之后，让我们快乐地玩(写代码)~我们可以在这个效果上加一点动画，让它看起来更有趣~。图像-未加载{//Fix IOS缺少重绘，添加无意义的变换强制Transform 3360scale (1)重绘；filter : blur(30px)；}.Image-is-loaded {//Fix IOS缺少重绘，添加无意义变换强制触发Transform 3360比例(1)重绘；filter : blur(20px)；animation:锐化0.8s两者；} @关键帧锐化{ 0% { filter : blur(20px)；} 100% { filter : blur(0px)；}}在复制代码的时候，要注意模糊方法在ios上无法正确显示的问题。查询相关文章后发现是因为ios缺少重绘，也就是说ios无法按照这个代码重绘页面，所以无法正确显示。想要解决这个问题，只需要给他加一个无意义的变换，强行触发重绘~ ~

效果图如下： 5571f524-1f57-43da-