整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
終效果圖如下：
我們看一下實(shí)現(xiàn)過程。
主框架是vue開發(fā)，做成了一個動畫組件，因?yàn)樯婕暗蕉鄠€頁面引用，最主要的實(shí)現(xiàn)是css3語法實(shí)現(xiàn)過程，并且要做到循環(huán)播放。
左邊出來動畫時間是0.5秒，停留3秒往上走，然后動畫時間0.5秒，停留3秒后然后消失，消失動畫時間0.5秒，總共的時間消耗是7.5秒。可以得到以下計算比例
0/7.5 = 0%
0.5/7.5 = 6.66%
3.5/7.5 = 46.66%
4/7.5 = 53.33%
7/7.5 = 93.33%
7.5/7.5 = 100%
然后每個比例所對應(yīng)的css如下
就可以實(shí)現(xiàn)css3動畫了，再加上js實(shí)現(xiàn)無縫循環(huán)播放
于圖像是網(wǎng)絡(luò)上最受歡迎的內(nèi)容類型之一，網(wǎng)站上的頁面加載時間很容易成為一個問題。
即使經(jīng)過適當(dāng)優(yōu)化，圖像的重量也會相當(dāng)大。這可能會對訪問者在訪問您網(wǎng)站上的內(nèi)容之前必須等待的時間產(chǎn)生負(fù)面影響。很有可能，他們會變得不耐煩并在其他地方導(dǎo)航，除非您想出一個不影響速度感知的圖像加載解決方案。
在本文中，您將了解五種延遲加載圖像的方法，您可以將這些方法添加到您的Web優(yōu)化工具包中，以改善您網(wǎng)站上的用戶體驗(yàn)。
延遲加載圖片意味著在網(wǎng)站上異步加載圖片——也就是說，在首屏內(nèi)容完全加載之后，或者甚至有條件地，只有當(dāng)它們出現(xiàn)在瀏覽器的視口中時。這意味著如果用戶不一直向下滾動，放置在頁面底部的圖像甚至不會被加載。
許多網(wǎng)站都使用這種方法，但在圖片較多的網(wǎng)站上尤為明顯。嘗試瀏覽您最喜歡的在線獵場以獲取高分辨率照片，您很快就會意識到該網(wǎng)站如何只加載有限數(shù)量的圖像。當(dāng)您向下滾動頁面時，您會看到占位符圖像快速填充真實(shí)圖像以供預(yù)覽。例如，注意Unsplash.com上的加載器：將頁面的該部分滾動到視圖中會觸發(fā)用全分辨率照片替換占位符：
您應(yīng)該考慮為您的網(wǎng)站延遲加載圖像至少有幾個很好的理由：
好吧，延遲加載圖像有助于提高網(wǎng)站性能，但最好的方法是什么？
沒有完美的方法。
如果您熟悉JavaScript，那么實(shí)現(xiàn)您自己的延遲加載解決方案應(yīng)該不是問題。沒有什么比自己編寫代碼更能控制你的了。
或者，您可以瀏覽Web以尋找可行的方法并開始試驗(yàn)它們。我就是這樣做的，并遇到了這五種有趣的技術(shù)。
圖像和iframe的原生延遲加載非常酷。沒有什么比下面的標(biāo)記更直接了：
<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>
如您所見，沒有 JavaScript，沒有動態(tài)交換src屬性值，只是普通的舊 HTML。
該loading屬性為我們提供了延遲屏幕外圖像和iframe的選項(xiàng)，直到用戶滾動到他們在頁面上的位置。loading可以采用以下三個值中的任何一個：
這種方法沒有競爭對手：它的開銷為零，干凈簡單。然而，盡管在撰寫本文時，大多數(shù)主要瀏覽器都對loading屬性有很好的支持，但并非所有瀏覽器都支持。
有關(guān)延遲加載圖像的這項(xiàng)出色功能（包括瀏覽器支持變通方法）的深入文章，請不要錯過 Addy Osmani 的“網(wǎng)絡(luò)原生圖像延遲加載”！。
Intersection Observer API 是一個現(xiàn)代化的界面，你可以利用的延遲加載圖片和其他內(nèi)容。Intersection Observer API 提供了一種異步觀察目標(biāo)元素與祖先元素或頂級文檔視口的交集變化的方法。
換句話說，被異步觀察的是一個元素與另一個元素的交集。
Denys Mishunov 有一個關(guān)于 Intersection Observer 和使用它的延遲加載圖像的很棒的教程。這是他的解決方案的樣子。
假設(shè)您想延遲加載圖片庫。每個圖像的標(biāo)記如下所示：
<img data-src="image.jpg" alt="test image">
請注意圖像的路徑如何包含在data-src屬性中，而不是src屬性中。原因是使用src意味著圖像會立即加載，這不是您想要的。
在 CSS 中，您為每個圖像賦予一個min-height值，例如100px. 這為每個圖像占位符（沒有 src 屬性的 img 元素）提供了一個垂直維度：
img { min-height: 100px; /* more styles here */ }
然后在JavaScript文檔中創(chuàng)建一個config對象并將其注冊到一個intersectionObserver實(shí)例中：
// create config object: rootMargin and threshold // are two properties exposed by the interface const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src ploadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } }); }, config);
最后，您遍歷所有圖像并將它們添加到此iterationObserver實(shí)例中：
const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => { observer.observe(img); });
該解決方案的優(yōu)點(diǎn)：實(shí)施起來輕而易舉，有效，并且可以在intersectionObserver計算方面進(jìn)行繁重的工作。
另一方面，盡管最新版本的大多數(shù)瀏覽器都支持 Intersection Observer API，但并非所有瀏覽器都一致支持。幸運(yùn)的是，有一個polyfill可用。
實(shí)現(xiàn)圖像延遲加載的一種快速簡便的替代方法是讓 JS 庫為您完成大部分工作。
Lozad 是一個高性能、輕量級和可配置的純JavaScript惰性加載器，沒有依賴項(xiàng)。您可以使用它來延遲加載圖像、視頻、iframe 等，并且它使用 Intersection Observer API。
你可以在 npm/Yarn 中包含 Lozad 并使用你選擇的模塊打包器導(dǎo)入它：
npm install --save lozad yarn add lozad
import lozad from 'lozad';
或者，您可以簡單地使用 CDN 下載庫并將其添加到 HTML 頁面底部的< script>標(biāo)簽中：
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"> </script>
接下來，對于基本實(shí)現(xiàn)，將類lozad添加到標(biāo)記中的資產(chǎn)：
<img class="lozad" data-src="img.jpg">
最后，在你的 JS 文檔中實(shí)例化 Lozad：
const observer = lozad(); observer.observe();
您將在Lozad GitHub 存儲庫上找到有關(guān)如何使用該庫的所有詳細(xì)信息。
如果您不想深入研究 Intersection Observer API 的工作原理，或者您只是在尋找適用于各種內(nèi)容類型的快速實(shí)現(xiàn)，那么 Lozad 是一個不錯的選擇。
只是，請注意瀏覽器支持，并最終將此庫與 Intersection Observer API 的 polyfill 集成。
如果您是Medium讀者，您肯定已經(jīng)注意到該網(wǎng)站如何在帖子中加載主圖片。
您首先看到的是圖像的模糊、低分辨率副本，而其高分辨率版本正在延遲加載。
您可以通過多種方式延遲加載具有這種有趣模糊效果的圖像。
我們最喜歡的技術(shù)是 Craig Buckler。這是此解決方案的所有優(yōu)點(diǎn)：
Yall 是一個功能豐富的延遲加載腳本，用于圖像、視頻和 iframe。更具體地說，它使用 Intersection Observer API，并在必要時巧妙地使用傳統(tǒng)的事件處理程序技術(shù)。
在您的文檔中包含 Yall 時，您需要按如下方式對其進(jìn)行初始化：
<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>
接下來，要延遲加載一個簡單的img元素，您只需在標(biāo)記中執(zhí)行以下操作：
<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">
請注意以下事項(xiàng)：
Yall 的好處包括：
你有五種延遲加載圖像的方法，您可以開始在您的項(xiàng)目中進(jìn)行試驗(yàn)和測試。
、廣告代碼分析
很多第三方地廣告系統(tǒng)都是使用document.write來加載廣告，如下面地一個javascript地廣告鏈接.
代碼如下:
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
