分享一些懶加載圖片與高級懶加載技巧，提升網站速度和用

分享一些懶加載圖片與高級懶加載技巧，提升網站速度和用戶體驗

載說明：原創不易，未經授權，謝絕任何形式的轉載

開篇

懶加載圖片是加快網站加載速度最簡單的方法之一，因為最基本的懶加載只需要一行代碼。然而，你還可以使用一些高級技巧，使你的懶加載效果看起來像上面的圖片一樣，具有模糊的占位符和從占位符到完整圖片的平滑過渡效果。在本文中，我將介紹關于懶加載的一切知識，以及如何創建這種高級懶加載效果。

什么是懶加載？

懶加載是一種延遲加載資源的技術。在圖片的情況下，這意味著直到用戶滾動到屏幕上可見圖片的位置，該圖片才會被下載。這是一種加快網站速度的好方法，因為你只會下載用戶實際可見的圖片。對于包含大量圖片的網站尤其有用，因為你只下載用戶實際可見的圖片，從而可以節省大量帶寬。

如果你的網絡速度很快，或者你只訪問加載速度很快、圖片優化得很好的網站，你可能看不出懶加載圖片的優勢，因為你幾乎可以立即下載所有圖片。但對其他人來說，懶加載圖片是一個革命性的改變。這并不僅僅適用于網絡連接非常慢的用戶。圖片是用戶下載的最大資產之一，即使他們的網絡連接很快，懶加載圖片仍然可以極大地提高網站的加載時間。

基本的懶加載

正如我在本文開頭提到的，懶加載圖片就像在圖像標簽中添加一個屬性那樣簡單。可以將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/

非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正

東IT優就業

模糊搜索功能在工作中應用廣泛，并且很實用，自己寫了一個方法，以后用到的時候可以直接拿來用了！

實現的搜索功能：

1. 可以匹配輸入的字符串找出列表中匹配的項，列表框的高度跟隨搜索出的列表項的多少改變

2. 可以點擊某一項進行選中列表項

3. 可以按下上、下、回車鍵來控制列表項

4. 按下回車鍵時則會選中列表項

5. 點擊文本框中的下拉鍵頭時會切換下拉框的顯示/隱藏

6. 點擊文本框外部時自動隱藏下拉框

先來預覽一下效果吧！

列表中包含的列表項有：

北京、上海、杭州、安慶、大興安嶺、安陽、廣州、貴陽、哈爾濱、合肥、邯鄲、呼倫貝爾、淮南、黃山、濟南、濟寧、嘉興、南昌、南通、南寧、南京
在預覽時需要輸入匹配以上項目的文字，以便更好的預覽效果

點擊鏈接預覽模糊搜索功能

http://sandbox.runjs.cn/show/kwxlptbl

下面就開始實現功能啦！

一、首先，引入jquery文件

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

二、html部分

<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>

此時的頁面：

廣東IT優就業

四、使用js、jquery實現模糊搜索功能

<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>

此時的頁面

廣東IT優就業

需要注意的地方：

1. 使用此方法時，需要給輸入框加類名selectInput，給下拉剪頭加類名picture_click、dropDowns，給列表框加類名selectList;

2. 輸入框需要有list屬性，list屬性對應的值為列表框的id值

3. 需要給文本框綁定事件，onfocus="fuzzySearch.call(this)"，（由于自定義的函數中，this指向的是window，所以需要通過call方法改變this指向，即指向該文本框，以便在方法中使用）

4. 在實現搜索功能的過程中，遇到一點小問題，就是在獲取列表項的offersetTop時，獲取的是28，找不出原因，最終通過查閱相關資料終于解決，即想要獲取子元素的offsetTop，則需要給父元素設置相對定位，才能獲取到正確的offsetTop。

還能在線調試哦！

http://runjs.cn/code/kwxlptbl

廣東IT優就業

希望廣州IT培訓老師上述分享的內容對大家有所幫助。

出處：https://www.cnblogs.com/-lizi/p/8119814.html

更多IT精彩推薦：

帶你打開世界第一編程語言的大門：http://www.ujiuye.com/zt/java/?wt.mc_id=17009338

寫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

在線咨詢

上一篇：數據庫文檔生成工具，支持chm、word、pdf、e
下一篇：jQuery滾動切換，如此白菜效果你會信手拈來嗎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

分享一些懶加載圖片與高級懶加載技巧，提升網站速度和用

開篇

什么是懶加載？

基本的懶加載

高級懶加載

結束

還能在線調試哦！

box-shadow

內發光

text-shadow

發光文本

霓虹文本

偽3D文本

background-clip:text

gradient

linear-gradient

radial-gradient

conic-gradient

filter

融合效果

backdrop-filter

mix-blend-mode

clip-path

故障效果

mask

鏤空效果

-webkit-box-reflect

web animations

跟蹤鼠標的位置

CSS Houdini

讓漸變動起來

彩蛋

您的項目需求