js初始化載入圖片

❶ javascript圖片預載入和延時載入的區別

javascript圖片預載入和延時載入的區別主要體現在圖片傳輸到客戶端的時機上，都是為了提升用戶體驗的,延時載入又叫懶載入。
兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。
預載入：提前載入圖片，當用戶需要查看時可直接從本地緩存中渲染。
實現方式： 可以用CSS(background)、js(Image)、HTML(<img />)都可以。常用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。
懶載入：主要目的是作為伺服器前端的優化，減少請求數或延遲請求數，一些圖片非常多的網站中非常有用，在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置才載入，這樣對於含有很多 圖片的比較長的網頁來說，可以載入的更快，並且還能節省伺服器帶寬。，實現方式：
1.第一種是純粹的延遲載入，使用setTimeOut或setInterval進行載入延遲.
2.第二種是條件載入，符合某些條件，或觸發了某些事件才開始非同步下載。
3.jQuery插件中也有插件來實現該功能。
4.第三種是可視區載入，即僅載入用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍開始載入，這樣能保證用戶拉下時正好能看到圖片。
預載入核心代碼參考：
document.getElementById("preload-01").style.background = "url(http://expsoft.com/image-01.png) no-repeat -9999px -9999px";

img1 = new Image();img1.src = "http://expsoft.com/path/to/image-001.gif";
if (img1.complete) { ready.call(img); load && load.call(img);
callback.call(img1,img1.width, img1.height);
return; }// 直接返回，不用再處理onload事件
img1.onload = function(){ callback.call(img1,img1.width, img1.height); };
懶載入核心代碼參考：
.lazy {
display: none;
}
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
必須在 DOM ready 時將佔位符顯示出來, 這可以在插件初始化的同時完成.

$("img.lazy").show().lazyload();

設置敏感度，默認情況下圖片會出現在屏幕時載入. 如果你想提前載入圖片, 可以設置 threshold 選項, 設置 threshold 為 200 令圖片在距離屏幕 200 像素時提前載入.
$("img.lazy").lazyload({ threshold : 200 });

❷ 原生 JS 封裝三種 loading 動畫

原生 JS 可以封裝以下三種 loading 動畫：

1. 第一種動畫：

   • 通過在 loading.js 文件中定義 init 方法初始化動畫。
   • 根據 type 值的不同，設置 loading 的 innerHTML 來呈現獨特的動畫表現。
   • 結合 loading.css 中的樣式設計，可能包括布局和旋轉等效果，例如通過兩個正方形疊加並旋轉 45° 來實現特定的小球排列效果。

2. 第二種動畫：

   • 同樣使用 init 方法進行初始化。
   • 動畫邏輯與第一種動畫在 JS 部分高度相似，主要通過復用代碼實現。
   • 在 loading.css 中調整相關參數，以實現與第一種動畫不同的視覺效果。
   • 動畫過程中同樣涉及到子節點的刪除，以確保動畫流暢。

3. 第三種動畫：

   • 初始化過程與前兩種動畫一致，使用 init 方法。
   • 在動畫實現上，復用第一種或第二種動畫的 JS 代碼，並調整相關參數以達到新的動畫效果。
   • loading.css 中的樣式設計也會進行相應調整，以實現獨特的載入動畫。
   • 同樣注重動畫過程中的流暢性，確保子節點的適時刪除。

總結： 這三種載入動畫的實現均依賴於原生 JS 和 CSS 的結合。 通過定義 init 方法並設置不同的 type 值，可以呈現多樣化的動畫效果。 動畫的流暢性通過精心設計的 JS 邏輯和 CSS 樣式得到保障。