整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
懶加載圖片是加快網(wǎng)站加載速度最簡單的方法之一，因為最基本的懶加載只需要一行代碼。然而，你還可以使用一些高級技巧，使你的懶加載效果看起來像上面的圖片一樣，具有模糊的占位符和從占位符到完整圖片的平滑過渡效果。在本文中，我將介紹關(guān)于懶加載的一切知識，以及如何創(chuàng)建這種高級懶加載效果。
懶加載是一種延遲加載資源的技術(shù)。在圖片的情況下，這意味著直到用戶滾動到屏幕上可見圖片的位置，該圖片才會被下載。這是一種加快網(wǎng)站速度的好方法，因為你只會下載用戶實際可見的圖片。對于包含大量圖片的網(wǎng)站尤其有用，因為你只下載用戶實際可見的圖片，從而可以節(jié)省大量帶寬。
如果你的網(wǎng)絡(luò)速度很快，或者你只訪問加載速度很快、圖片優(yōu)化得很好的網(wǎng)站，你可能看不出懶加載圖片的優(yōu)勢，因為你幾乎可以立即下載所有圖片。但對其他人來說，懶加載圖片是一個革命性的改變。這并不僅僅適用于網(wǎng)絡(luò)連接非常慢的用戶。圖片是用戶下載的最大資產(chǎn)之一，即使他們的網(wǎng)絡(luò)連接很快，懶加載圖片仍然可以極大地提高網(wǎng)站的加載時間。
正如我在本文開頭提到的，懶加載圖片就像在圖像標簽中添加一個屬性那樣簡單?？梢詫oading屬性設(shè)置為lazy，以啟用圖像的懶加載。瀏覽器將根據(jù)圖像離屏幕的距離來自動確定何時下載圖像。
<img src="image.jpg" loading="lazy" />本頁面上的所有圖片都是懶加載的，因此當你向下滾動頁面時，你會注意到這些圖片直到接近屏幕時才加載。你可以通過查看網(wǎng)絡(luò)選項卡并將其篩選為僅顯示圖片請求來輕松觀察到這一點。
當你查看網(wǎng)絡(luò)選項卡時，你可能會注意到每個圖片都附帶了一個隨機的ID。我這樣做的原因是，如果你在頁面上多次加載相同的圖片，瀏覽器只會下載一次，所以我為每個圖片添加了一個唯一的ID，以便瀏覽器認為它們是不同的圖片，并單獨下載它們，這樣你就可以在開發(fā)工具中看到懶加載的效果。
這種基本的懶加載的最大缺點是，在圖像下載之前，用戶將看到圖像應(yīng)該出現(xiàn)的空白空間。它的外觀可能類似于下面的圖片：
這并不是理想的用戶體驗，因此本文的其余部分將向您展示如何利用懶加載來顯示一個模糊的占位符圖像，直到完整的圖像下載完成。
在查看開發(fā)工具時，你可能會注意到有一堆非常小的圖片被下載了。這些是顯示在完整圖像下載之前的模糊占位符圖像，這是創(chuàng)建這種高級懶加載效果的第一步。
要創(chuàng)建一個模糊的占位符圖像，你只需要生成一個超低分辨率版本的圖像。有很多方法可以做到這一點，比如使用像 BlurHash 這樣的服務(wù)、在 Figma 這樣的工具中手動調(diào)整圖像大小，或者使用像 ffmpeg 這樣的工具進行自動處理。在本文中，我將使用 ffmpeg 生成占位符圖像，因為它是最靈活的選項，并且可以輕松自動化。我只需要在包含要生成占位符圖像的圖像的目錄中，在命令行中運行下面的代碼。
ffmpeg -i imageName.jpg -vf scale=20:-1 imageName-small.jpg這樣生成的占位符圖像寬度為20個像素，高度將根據(jù)原始圖像的寬高比自動計算。你可以根據(jù)需要更改寬度，但我發(fā)現(xiàn)20個像素對于大多數(shù)圖像效果良好，并且足夠小，即使在較慢的網(wǎng)絡(luò)連接下也能幾乎立即加載。我的占位符圖像每個都不到1KB。
下一步是創(chuàng)建一個 div，并將該 div 的背景圖像設(shè)置為我們的超小圖像。這將是在完整圖像下載之前顯示的占位符圖像。我們的代碼將類似于下面這樣：
<div class="blurred-img"></div>.blurred-img {
background-image: url(imageName-small.jpg);
background-repeat: no-repeat;
background-size: cover;
}很可能你的圖片不會像我所描述的那么大，因為"blurred-img" div 的大小是根據(jù)其中的內(nèi)容來確定的。不過，我們可以通過將 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);
}你甚至可以更進一步，為占位符圖像添加一個動畫效果。這將使圖像的加載狀態(tài)更加明顯。
.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;
}
}現(xiàn)在，我們只需在完整圖像加載完成后淡入圖像即可。與我們之前編寫的代碼相比，這部分略微復(fù)雜一些，因為它需要使用 JavaScript，但仍然相當簡單。我們只需要為圖像添加一個事件監(jiān)聽器，該監(jiān)聽器將在圖像加載完成時觸發(fā)，然后我們可以淡入圖像。
<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 內(nèi)的 img 元素。接著，我們檢查 img 元素的 complete 屬性，以確定它是否已經(jīng)加載完成。如果返回值為 true，則表示圖像已加載完成，我們只需調(diào)用 loaded 函數(shù)即可。但如果返回值為 false，則需要為 img 元素添加一個事件監(jiān)聽器，該監(jiān)聽器在圖像加載完成時觸發(fā)，并調(diào)用 loaded 函數(shù)。loaded 函數(shù)只是將 loaded 類添加到 "blurred-img" div 上。
在 CSS 代碼中，我們對代碼進行了一些更改。首先，我們從 "blurred-img::before" 元素中移除了動畫/內(nèi)容，這將在圖像加載完成后停止動畫。我們還為 img 元素添加了一個過渡效果，這樣當 loaded 類被添加到 "blurred-img" div 上時，圖像將漸漸淡入。最后，我們將 img 元素的不透明度設(shè)置為 1，這樣在圖像加載完成后它將可見。
通過進行上述操作，將得到以下效果：加載模糊的占位符圖像，直到完整圖像加載完成后淡入顯示。你可以在開發(fā)工具中調(diào)整網(wǎng)絡(luò)速度，觀察加載動畫的效果。
懶加載圖片是一種簡單的技術(shù)，可以改善網(wǎng)站的用戶體驗。最簡單的懶加載只需要一行代碼，但可以通過添加一些額外的代碼實現(xiàn)更多有趣的加載技巧。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。
原文：
https://blog.webdevsimplified.com/2023-05/lazy-load-images/
非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正
東IT優(yōu)就業(yè)
模糊搜索功能在工作中應(yīng)用廣泛，并且很實用，自己寫了一個方法，以后用到的時候可以直接拿來用了！
實現(xiàn)的搜索功能：
1. 可以匹配輸入的字符串找出列表中匹配的項，列表框的高度跟隨搜索出的列表項的多少改變
2. 可以點擊某一項進行選中列表項
3. 可以按下上、下、回車鍵來控制列表項
4. 按下回車鍵時則會選中列表項
5. 點擊文本框中的下拉鍵頭時會切換下拉框的顯示/隱藏
6. 點擊文本框外部時自動隱藏下拉框
先來預(yù)覽一下效果吧！
列表中包含的列表項有：
北京、上海、杭州、安慶、大興安嶺、安陽、廣州、貴陽、哈爾濱、合肥、邯鄲、呼倫貝爾、淮南、黃山、濟南、濟寧、嘉興、南昌、南通、南寧、南京 在預(yù)覽時需要輸入匹配以上項目的文字，以便更好的預(yù)覽效果
點擊鏈接預(yù)覽模糊搜索功能
http://sandbox.runjs.cn/show/kwxlptbl
下面就開始實現(xiàn)功能啦！
一、首先，引入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優(yōu)就業(yè)
四、使用js、jquery實現(xiàn)模糊搜索功能
<script type="text/javascript"> //初始化下拉框 initSearchInput(); function fuzzySearch(e) { var that=this; //獲取列表的ID
var listId=$(this).attr("list"); //列表
var list=$('#' + listId + ' div'); //列表項數(shù)組 包列表項的id、內(nèi)容、元素
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'); //如果按下回車，將此列表項的內(nèi)容填充到文本框中 $(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;
} //設(shè)置當前項的背景色及位置
$.each(showList, function(index, item){ if(index==current) {
item.style.background="#eee";
$('#' + listId).scrollTop(item.offsetTop);
}else {
item.style.background="";
}
}) //設(shè)置下拉框的高度
//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() { //給下拉箭頭綁定點擊事件 點擊下拉箭頭顯示/隱藏對應(yīng)的列表
//輸入框的類名為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();
})
} //為列表中的每一項綁定鼠標經(jīng)過事件
$('.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優(yōu)就業(yè)
需要注意的地方：
1. 使用此方法時，需要給輸入框加類名selectInput，給下拉剪頭加類名picture_click、dropDowns，給列表框加類名selectList;
2. 輸入框需要有l(wèi)ist屬性，list屬性對應(yīng)的值為列表框的id值
3. 需要給文本框綁定事件，onfocus="fuzzySearch.call(this)"，（由于自定義的函數(shù)中，this指向的是window，所以需要通過call方法改變this指向，即指向該文本框，以便在方法中使用）
4. 在實現(xiàn)搜索功能的過程中，遇到一點小問題，就是在獲取列表項的offersetTop時，獲取的是28，找不出原因，最終通過查閱相關(guān)資料終于解決，即想要獲取子元素的offsetTop，則需要給父元素設(shè)置相對定位，才能獲取到正確的offsetTop。
http://runjs.cn/code/kwxlptbl
廣東IT優(yōu)就業(yè)
希望廣州IT培訓(xùn)老師上述分享的內(nèi)容對大家有所幫助。
出處：https://www.cnblogs.com/-lizi/p/8119814.html
更多IT精彩推薦：
帶你打開世界第一編程語言的大門：http://www.ujiuye.com/zt/java/?wt.mc_id=17009338
寫CSS的常用套路（下篇）...
點擊觀看——我寫CSS的常用套路（上篇）...
為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑
本demo地址：Pagination
注意到box-shadow還有個inset，用于盒子內(nèi)部發(fā)光
利用這個特性我們可以在盒子內(nèi)部的某個范圍內(nèi)設(shè)定顏色，做出一個新月形
再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！
注意到它散發(fā)著淡淡的紅光，其實就是2個偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果
本demo地址：Crimson Crescent Loading
文本陰影，本質(zhì)上和box-shadow相同，只不過是相對于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果
本demo地址：Staggered GlowIn Text
本demo地址：Neon Text
本demo地址：Staggered Bouncing 3D Loading
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本demo地址：Menu Hover Fill Text
漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光
線性漸變是筆者最常用的漸變
這個作品用到了HTML的dialog標簽，線性漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)
本demo地址：Confirm Modal
徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變
此外，由于背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點群，再加上動畫就產(chǎn)生了一種微粒效果，無需多余的div元素
本demo地址：Particle Button
圓錐漸變可以用于制作餅圖
用一個偽元素疊在餅圖上面，并將content設(shè)為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命
本demo地址：Gauge (No SVG)
PS里的濾鏡，blur最常用
當blur濾鏡和contrast濾鏡一起使用時，會產(chǎn)生一種融合（gooey）的奇特效果
本demo地址：Snow Scratch
對背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果
本demo地址：Frosted Glass
PS里的混合模式，常用于文本在背景下的特殊效果
以下利用濾色模式（screen）實現(xiàn)文本視頻蒙版效果
本demo地址：Video Mask Text
PS里的裁切，可以制作各種不規(guī)則形狀。如果和動畫結(jié)合也會相當有意思
本demo地址：Name Card Hover Expand
由于clip-path有裁切功能，因此可以將多個文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯動畫，就能制作出酷炫的故障效果（glitch）。
本demo地址：Cross Bar Glitch Text
PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分
雖然clip-path能裁切出形狀，但它無法鏤空，因為形狀的里面它管不著
可能有人（包括我）會用偽元素來“模擬”鏤空（通過設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個背景或浮在圖片上就會暴露出來，這時我們就要求助于遮罩了
假設(shè)，你想制作一個空心的圓環(huán)，那么你只需將一個徑向漸變作為元素的遮罩，并且第一個color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因為遮罩的定義就是只顯示遮罩圖片非透明的部分
注意：為了消除鋸齒，這個徑向漸變的中間需要有一個額外的color-stop用于緩沖，長度設(shè)置為原長度加0.5px即可
本demo地址：Circle Arrow Nav
投影效果，不怎么常用，適合立體感強的作品
本demo地址：Card Flip Reflection
雖然這并不是一個CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情
那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了
目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行
通過查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置
既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監(jiān)聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監(jiān)聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現(xiàn)了
本demo地址：Menu Hover Image
CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能
目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型
這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應(yīng)用插值方法來進行動畫
還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會順時針旋轉(zhuǎn)出現(xiàn)
利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設(shè)置不同的顏色，應(yīng)用交錯動畫，就有了下面這個炫麗的效果
本demo地址：Mawaru
將交錯動畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單
本demo地址：Shinchou Menu
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
