载说明：原创不易，未经授权，谢绝任何形式的转载

开篇

懒加载图片是加快网站加载速度最简单的方法之一，因为最基本的懒加载只需要一行代码。然而，你还可以使用一些高级技巧，使你的懒加载效果看起来像上面的图片一样，具有模糊的占位符和从占位符到完整图片的平滑过渡效果。在本文中，我将介绍关于懒加载的一切知识，以及如何创建这种高级懒加载效果。

什么是懒加载？

懒加载是一种延迟加载资源的技术。在图片的情况下，这意味着直到用户滚动到屏幕上可见图片的位置，该图片才会被下载。这是一种加快网站速度的好方法，因为你只会下载用户实际可见的图片。对于包含大量图片的网站尤其有用，因为你只下载用户实际可见的图片，从而可以节省大量带宽。

如果你的网络速度很快，或者你只访问加载速度很快、图片优化得很好的网站，你可能看不出懒加载图片的优势，因为你几乎可以立即下载所有图片。但对其他人来说，懒加载图片是一个革命性的改变。这并不仅仅适用于网络连接非常慢的用户。图片是用户下载的最大资产之一，即使他们的网络连接很快，懒加载图片仍然可以极大地提高网站的加载时间。

基本的懒加载

正如我在本文开头提到的，懒加载图片就像在图像标签中添加一个属性那样简单。可以将loading属性设置为lazy，以启用图像的懒加载。浏览器将根据图像离屏幕的距离来自动确定何时下载图像。

<img src="image.jpg" loading="lazy" />

本页面上的所有图片都是懒加载的，因此当你向下滚动页面时，你会注意到这些图片直到接近屏幕时才加载。你可以通过查看网络选项卡并将其筛选为仅显示图片请求来轻松观察到这一点。

当你查看网络选项卡时，你可能会注意到每个图片都附带了一个随机的ID。我这样做的原因是，如果你在页面上多次加载相同的图片，浏览器只会下载一次，所以我为每个图片添加了一个唯一的ID，以便浏览器认为它们是不同的图片，并单独下载它们，这样你就可以在开发工具中看到懒加载的效果。

这种基本的懒加载的最大缺点是，在图像下载之前，用户将看到图像应该出现的空白空间。它的外观可能类似于下面的图片：

这并不是理想的用户体验，因此本文的其余部分将向您展示如何利用懒加载来显示一个模糊的占位符图像，直到完整的图像下载完成。

高级懒加载

在查看开发工具时，你可能会注意到有一堆非常小的图片被下载了。这些是显示在完整图像下载之前的模糊占位符图像，这是创建这种高级懒加载效果的第一步。

要创建一个模糊的占位符图像，你只需要生成一个超低分辨率版本的图像。有很多方法可以做到这一点，比如使用像 BlurHash 这样的服务、在 Figma 这样的工具中手动调整图像大小，或者使用像 ffmpeg 这样的工具进行自动处理。在本文中，我将使用 ffmpeg 生成占位符图像，因为它是最灵活的选项，并且可以轻松自动化。我只需要在包含要生成占位符图像的图像的目录中，在命令行中运行下面的代码。

ffmpeg -i imageName.jpg -vf scale=20:-1 imageName-small.jpg

这样生成的占位符图像宽度为20个像素，高度将根据原始图像的宽高比自动计算。你可以根据需要更改宽度，但我发现20个像素对于大多数图像效果良好，并且足够小，即使在较慢的网络连接下也能几乎立即加载。我的占位符图像每个都不到1KB。

下一步是创建一个 div，并将该 div 的背景图像设置为我们的超小图像。这将是在完整图像下载之前显示的占位符图像。我们的代码将类似于下面这样：

<div class="blurred-img"></div>

.blurred-img {
  background-image: url(imageName-small.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

很可能你的图片不会像我所描述的那么大，因为"blurred-img" div 的大小是根据其中的内容来确定的。不过，我们可以通过将 img 添加到 div 中，并确保默认情况下隐藏它，以确保我们不会在图像加载过程中看到它的一半。我们可以轻松解决这个问题。

<div class="blurred-img">
  <img src="imageName.jpg" loading="lazy" />
</div>

.blurred-img img {
  opacity: 0;
}

这将给我们带来我们期望的效果。我们之所以自动获得模糊效果，是因为浏览器会自动将超小图像进行缩放。如果你想要增加更多的模糊效果，你可以使用 CSS 的 filter 属性，在 "blurred-img" div 上添加模糊滤镜。不过，个人而言，我认为这并不是必需的。

.blurred-img {
  filter: blur(10px);
}

你甚至可以更进一步，为占位符图像添加一个动画效果。这将使图像的加载状态更加明显。

.blurred-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
  background-color: white;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

现在，我们只需在完整图像加载完成后淡入图像即可。与我们之前编写的代码相比，这部分略微复杂一些，因为它需要使用 JavaScript，但仍然相当简单。我们只需要为图像添加一个事件监听器，该监听器将在图像加载完成时触发，然后我们可以淡入图像。

<div class="blurred-img">
  <img src="imageName.jpg" loading="lazy" />
</div>

const blurredImageDiv=document.querySelector(".blurred-image")
const img=blurredImageDiv.querySelector("img")
function loaded() {
  blurredImageDiv.classList.add("loaded")
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener("load", loaded)
}

.blurred-img {
  background-repeat: no-repeat;
  background-size: cover;
}

.blurred-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
  background-color: var(--text-color);
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

.blurred-img.loaded::before {
  animation: none;
  content: none;
}

.blurred-img img {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.blurred-img.loaded img {
  opacity: 1;
}

这是一段较长的代码，所以我将逐步解释。在 JavaScript 代码中，我们首先选择了 "blurred-img" div，然后选择了该 div 内的 img 元素。接着，我们检查 img 元素的 complete 属性，以确定它是否已经加载完成。如果返回值为 true，则表示图像已加载完成，我们只需调用 loaded 函数即可。但如果返回值为 false，则需要为 img 元素添加一个事件监听器，该监听器在图像加载完成时触发，并调用 loaded 函数。loaded 函数只是将 loaded 类添加到 "blurred-img" div 上。

在 CSS 代码中，我们对代码进行了一些更改。首先，我们从 "blurred-img::before" 元素中移除了动画/内容，这将在图像加载完成后停止动画。我们还为 img 元素添加了一个过渡效果，这样当 loaded 类被添加到 "blurred-img" div 上时，图像将渐渐淡入。最后，我们将 img 元素的不透明度设置为 1，这样在图像加载完成后它将可见。

通过进行上述操作，将得到以下效果：加载模糊的占位符图像，直到完整图像加载完成后淡入显示。你可以在开发工具中调整网络速度，观察加载动画的效果。

结束

懒加载图片是一种简单的技术，可以改善网站的用户体验。最简单的懒加载只需要一行代码，但可以通过添加一些额外的代码实现更多有趣的加载技巧。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

原文：
https://blog.webdevsimplified.com/2023-05/lazy-load-images/

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正

北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝尔、淮南、黄山、济南、济宁、嘉兴、南昌、南通、南宁、南京
在预览时需要输入匹配以上项目的文字，以便更好的预览效果

<script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>

<div id="container">
<h2>模糊搜索</h2>
<div id="cityContainer" class="selectContainer">
<label>城市：</label>
<input type="text" placeholder="请输入城市名称" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this)" />
<div class="picture_click dropDowns" style=""></div
<div id="cityList" class="selectList">
<div id="001">北京</div>
<div id="002">上海</div>
<div id="003">杭州</div>
<div id="004">安庆</div>
<div id="005">大兴安岭</div>
<div id="006">安阳</div>
<div id="007">广州</div>
<div id="008">贵阳</div>
<div id="009">哈尔滨</div>
<div id="010">合肥</div>
<div id="011">邯郸</div>
<div id="012">呼伦贝尔</div>
<div id="013">淮南</div>
<div id="014">黄山</div>
<div id="015">济南</div>
<div id="016">济宁</div>
<div id="017">嘉兴</div>
<div id="018">南昌</div>
<div id="019">南通</div>
<div id="020">南宁</div>
<div id="021">南京</div>
</div>
</div></div>

<style type="text/css">
 * {
 padding: 0;
 margin: 0;
}
 h2 {
 margin-bottom: 20px;
}
 #container {
 width: 500px;
 text-align: center;
 margin: 0 auto;
 font-family: "微软雅黑";
 margin-top: 50px;
}
 .selectContainer {
 position: relative;
}
 .selectInput {
 width: 200px;
 height: 25px;
 border-style: none;
 border: 1px solid #999;
 border-radius: 3px;
 padding: 0 3px;
}
 .picture_click {
 background: url(img/select-default.png) no-repeat;
 opacity: 1;
 width: 15px;
 height: 8px;
 position: absolute;
 top: 10px;
 right: 125px;
}
 .picture_click:hover {
 background-image: url(img/select-hover.png);
}
 .selectList {
 width: 206px;
 height: 212px;
 overflow-y: scroll;
 text-align: left;
 margin: 0 172px;
 border: 1px solid #999;
 display: none;
 position: relative;
}
 .selectList div {
 cursor: pointer;
}</style>

<script type="text/javascript"> //初始化下拉框 initSearchInput(); function fuzzySearch(e) { var that=this; //获取列表的ID
var listId=$(this).attr("list"); //列表
var list=$('#' + listId + ' div'); //列表项数组 包列表项的id、内容、元素
var listArr=[]; //遍历列表，将列表信息存入listArr中
$.each(list, function(index, item){ var obj={'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
 listArr.push(obj);
 }) 
 //current用来记录当前元素的索引值
var current=0; //showList为列表中和所输入的字符串匹配的项
var showList=[]; //为文本框绑定键盘引起事件
$(this).keyup(function(e){ //如果输入空格自动删除
this.value=this.value.replace(' ',''); //列表框显示
$('#' + listId).show(); if(e.keyCode==38) { //up
console.log('up');
 current --; if(current <=0) {
 current=0;
 }
 console.log(current);
 }else if(e.keyCode==40) { //down
console.log('down');
 current ++; if(current >=showList.length) {
 current=showList.length -1;
 }
 console.log(current);
 }else if(e.keyCode==13) { //enter
console.log('enter'); //如果按下回车，将此列表项的内容填充到文本框中 $(that).val(showList[current].innerHTML); //下拉框隐藏
$('#' + listId).hide();
 }else { //other
console.log('other'); //文本框中输入的字符串
var searchVal=$(that).val();
 showList=[]; //将和所输入的字符串匹配的项存入showList
//将匹配项显示，不匹配项隐藏
$.each(listArr, function(index, item){ if(item.eleName.indexOf(searchVal) !=-1) {
 item.ele.style.display="block";
 showList.push(item.ele);
 }else {
 item.ele.style.display='none';
 }
 })
 console.log(showList);
 current=0;
 } //设置当前项的背景色及位置
$.each(showList, function(index, item){ if(index==current) {
 item.style.background="#eee";
 $('#' + listId).scrollTop(item.offsetTop);
 }else {
 item.style.background="";
 }
 }) //设置下拉框的高度
//212为列表框的最大高度
if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
 $('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
 }else {
 $('#' + listId).height(212);
 }
 })
 } function initSearchInput() { //给下拉箭头绑定点击事件 点击下拉箭头显示/隐藏对应的列表
//输入框的类名为selectInput
//下拉箭头的类名为picture_click、dropDowns
//下拉列表的类名为selectList
for(var i=0; i < $('.picture_click').length; i++) {
 $('.picture_click').eq(i).click(function(){
 $(this).parent().find('.selectList').toggle();
 })
 } //为列表中的每一项绑定鼠标经过事件
$('.selectList div').mouseenter(function(){
 $(this).css("background", "#eee").siblings().css("background", "");
 }); //为列表中的每一项绑定单击事件
$('.selectList div').click(function(){ //文本框为选中项的值
$(this).parent().parent().find('.selectInput').val($(this).html()); //下拉框隐藏
$(this).parent().hide();
 }); 
 //点击下拉框外部的时候使下拉框隐藏
var dropDowns=document.getElementsByClassName('dropDowns'); var selectList=document.getElementsByClassName('selectList');
 document.body.onclick=function(e){
 e=e || window.event; var target=e.target || e.srcElement; for(var i=0; i < dropDowns.length; i++) { if(target !=dropDowns[i] && target !=selectList[i]){
 selectList[i].style.display='none';
 }
 }
 }
 }</script>

写CSS的常用套路（下篇）...

点击观看——我写CSS的常用套路（上篇）...

box-shadow

为盒子添加阴影，增加盒子的立体感，可以多层叠加，并且会使阴影更加丝滑

本demo地址：Pagination

内发光

注意到box-shadow还有个inset，用于盒子内部发光

利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形

再加点动画和滤镜效果，“猩红之月”闪亮登场！

注意到它散发着淡淡的红光，其实就是2个伪元素应用了模糊滤镜所产生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果

发光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

伪3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

本demo地址：Menu Hover Fill Text

gradient

渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光

linear-gradient

线性渐变是笔者最常用的渐变

这个作品用到了HTML的dialog标签，线性渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)

本demo地址：Confirm Modal

radial-gradient

径向渐变常用于生成圆形背景，上面例子中Snow的背景就是一个椭圆形的径向渐变

此外，由于背景可以叠加，我们可以叠加多个不同位置大小的径向渐变来生成圆点群，再加上动画就产生了一种微粒效果，无需多余的div元素

本demo地址：Particle Button

conic-gradient

圆锥渐变可以用于制作饼图

用一个伪元素叠在饼图上面，并将content设为某个值（这个值通过CSS变量计算出来），就能制作出度量计的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的滤镜，blur最常用

融合效果

当blur滤镜和contrast滤镜一起使用时，会产生一种融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

对背景应用滤镜，产生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用滤色模式（screen）实现文本视频蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以将多个文字叠在一起，并按比例裁切成多分，再应用交错动画，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所谓遮罩，就是原始图片只显示遮罩图片非透明的部分

镂空效果

虽然clip-path能裁切出形状，但它无法镂空，因为形状的里面它管不着

可能有人（包括我）会用伪元素来“模拟”镂空（通过设置同样的背景色），但这样并非真的镂空，换了个背景或浮在图片上就会暴露出来，这时我们就要求助于遮罩了

假设，你想制作一个空心的圆环，那么你只需将一个径向渐变作为元素的遮罩，并且第一个color-stop设置为透明，其他的color-stop设置为其他颜色即可，因为遮罩的定义就是只显示遮罩图片非透明的部分

注意：为了消除锯齿，这个径向渐变的中间需要有一个额外的color-stop用于缓冲，长度设置为原长度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，适合立体感强的作品

本demo地址：Card Flip Reflection

web animations

虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情

那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了

跟踪鼠标的位置

目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行

通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过e.clientX和e.clientY来获得鼠标当前的位置

既然能够获取鼠标的位置，那么跟踪鼠标的位置也就不是什么难事了：通过监听mouseenter和mouseleave事件，来获取鼠标出入一个元素时的位置，并用此坐标来当作鼠标的位移距离，监听mousemove事件，来获取鼠标在元素上移动时的位置，同样地用此坐标来当作鼠标的位移距离，这样一个跟踪鼠标的效果就实现了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底层API，它使我们能够通过这套接口来扩展CSS的功能

让渐变动起来

目前来说，我们无法直接给渐变添加动画，因为浏览器不理解要改变的值是什么类型

这时，我们就可以利用CSS.registerProperty()来注册我们的自定义变量，并声明其语法类型（syntax）为颜色类型<color>，这样浏览器就能理解并对颜色应用插值方法来进行动画

还记得上文提到的圆锥渐变conic-gradient()吗？既然它可以用来制作饼图，那么我们能不能让饼图动起来呢？答案是肯定的，定义三个变量：--color1、--color2和--pos，其中--pos的语法类型为长度百分比<length-percentage>，将其从0变为100%，饼图就会顺时针旋转出现

利用绝对定位和层叠上下文，我们可以叠加多个从小到大的饼图，再给它们设置不同的颜色，应用交错动画，就有了下面这个炫丽的效果

本demo地址：Mawaru

彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本demo地址：Shinchou Menu