我想知道谷歌如何處理圖像,以便縮略圖在加載之前顯示顏色。當我搜索某些東西時,結果就像當我檢查照片時,它顯示它們是一個錨標簽,其背景顏色類似于整體實際圖像顏色我有一個充滿圖像的網站,由于請求數量眾多,網站性能非常糟糕我使用了這個java腳本代碼function getAverageRGB(imgEl) { var blockSize = 5, // only visit every 5 pixels defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = {r:0,g:0,b:0}, count = 0; if (!context) { return defaultRGB; } height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try { data = context.getImageData(0, 0, width, height); } catch(e) { /* security error, img on diff domain */ return defaultRGB; } length = data.data.length; while ( (i += blockSize * 4) < length ) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i+1]; rgb.b += data.data[i+2]; } // ~~ used to floor values rgb.r = ~~(rgb.r/count); rgb.g = ~~(rgb.g/count); rgb.b = ~~(rgb.b/count); return rgb;}如何在加載實際照片之前添加 rgb 顏色作為占位符,然后使用延遲圖像加載技術加載實際圖像以減少請求數量
1 回答

MM們
TA貢獻1886條經驗 獲得超2個贊
第一步是防止預先加載圖像。對于使用標簽加載的圖片,瀏覽器使用標簽的 src 屬性來觸發圖片加載。無論它是 HTML 中的第 1 個還是第 1000 個圖像并且在屏幕外,如果瀏覽器獲取 src 屬性,它將觸發圖像加載。
因此,要延遲加載此類圖像,請將圖像 URL 放在 src 以外的屬性中。假設我們在圖像標簽的 data-src 屬性中指定了圖像 URL?,F在 src 為空,瀏覽器不會觸發圖像加載
現在我們已經停止了前期加載,我們需要告訴瀏覽器何時加載圖像。
為此,我們檢查一旦圖像(即它的占位符)進入視口,我們就會觸發加載。
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消