仿百亿补贴,H5 中图片先模糊后清晰的效果如何实现

逛过拼多多百亿补贴的同学,可能有一个体会,那就是图片加载非常快,很多图片瞬间就出现了,这是为什么呢?

答案是:百亿补贴先加载了一张模糊小图、再加载了一张清晰大图,用户很难感知到模糊到清晰的过程,误以为图片加载很快。

接下来我会先给出证据、再分析原理、提供关键代码,之后给百亿补贴的方法做扩展、补充,最后做一个简单总结。

当然,图片优化涉及知识很琐碎、广泛,先模糊小图后清晰大图只是其中一种手段,百亿补贴肯定还使用了其他技术。 如果朋友你想了解更多相关手段,可以点赞关注我。

拳打 H5,脚踢小程序。我是「小霖家的混江龙」,关注我,带你了解更多实用的 H5、小程序武学。

证据

我们可以有三个证据,可以证明:百亿补贴是先加载模糊小图,再加载清晰大图。

第一个证据:我们可以在控制台把网络调整成 Slow 3G,然后强制刷新浏览器,可以看到拼多多的图片,存在一个模糊到清晰的过程。

第二个证据:我们在控制台查看网络请求,可以看到请求中有一张小商品图、一张大商品图。

第三个证据:我们在控制台找到图片元素,可以看到图片元素是一个 a 标签包裹着一个 img 标签。其中 a 标签的 background-image 是模糊小图链接,img 标签的 src 是清晰大图链接。

原理及代码

要想知道先模糊、后清晰的原理,我们得先看一张 img 标签是如何加载图片的,如下所示:开始时 img 占据的区域为空白,随着图片的逐步加载,空白部分被慢慢填充。

准确地说,img 标签占据的区域,不是「空白」而是「透明」。这意味着,我们只需要给 img 标签设置一张模糊小图链接,给 img 标签的 src 设置清晰大图链接,当大图慢慢加载时,清晰图片会一步步遮挡住模糊图片,从而实现模糊到清晰的效果。

关键代码如下,非常简单:

html 复制代码
<div class="box">
  <a class="small-img">
    <img
      class="large-img"
      src="大图链接"
    />
  </a>
</div>
css 复制代码
.box {
  position: relative;
}
.small-img {
  position: absolute;
  background-image: url("小图链接");
  background-size: cover;
  background-position: unset;
}
.large-img {
  width: ...;
  height: ...;
}

获取小图链接也很简单,现在各大云服务商基本都提供了方法。比如 阿里云 只需要在图片 CDN 链接后面拼接一些参数,就可以得到图片缩放的小图。

更进一步,加模糊滤镜

百亿补贴的做法,对于电商活动 H5 已经足够。但更讲究氛围感的 H5,也许会觉得百亿补贴的效果很粗糙。针对这种 H5,我们可以更进一步,给小图加上模糊滤镜,等到大图加载完成时再去除模糊滤镜,并增加 transition 的过渡效果,就得到如下效果:

关键代码为:

css 复制代码
.small-img {
  ...
  filter: blur(20px);
  transition: all .5s ease-in-out;
}
.loaded {
  filter: blur(0);
}
js 复制代码
const small = document.querySelector('.small-img')
const large = document.querySelector('.large-img')

large.onload = function () {
  small.classList.add('loaded')
}

总结

本文分析了百亿补贴图片加载非常快的主要原因:先加载模糊小图,再加载清晰大图。并给出了关键证据,以及实现原理和代码。最后在百亿补贴方法的基础上,增加模糊滤镜,实现了更有氛围感的效果。

拳打 H5,脚踢小程序。我是「小霖家的混江龙」,关注我,带你了解更多实用的 H5、小程序武学。

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css