我想知道谷歌如何處理圖像,以便縮略圖在加載之前顯示顏色。當(dāng)我搜索某些東西時(shí),結(jié)果就像當(dāng)我檢查照片時(shí),它顯示它們是一個(gè)錨標(biāo)簽,其背景顏色類(lèi)似于整體實(shí)際圖像顏色我有一個(gè)充滿(mǎn)圖像的網(wǎng)站,由于請(qǐng)求數(shù)量眾多,網(wǎng)站性能非常糟糕我使用了這個(gè)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;}如何在加載實(shí)際照片之前添加 rgb 顏色作為占位符,然后使用延遲圖像加載技術(shù)加載實(shí)際圖像以減少請(qǐng)求數(shù)量
1 回答

MM們
TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊
第一步是防止預(yù)先加載圖像。對(duì)于使用標(biāo)簽加載的圖片,瀏覽器使用標(biāo)簽的 src 屬性來(lái)觸發(fā)圖片加載。無(wú)論它是 HTML 中的第 1 個(gè)還是第 1000 個(gè)圖像并且在屏幕外,如果瀏覽器獲取 src 屬性,它將觸發(fā)圖像加載。
因此,要延遲加載此類(lèi)圖像,請(qǐng)將圖像 URL 放在 src 以外的屬性中。假設(shè)我們?cè)趫D像標(biāo)簽的 data-src 屬性中指定了圖像 URL?,F(xiàn)在 src 為空,瀏覽器不會(huì)觸發(fā)圖像加載
現(xiàn)在我們已經(jīng)停止了前期加載,我們需要告訴瀏覽器何時(shí)加載圖像。
為此,我們檢查一旦圖像(即它的占位符)進(jìn)入視口,我們就會(huì)觸發(fā)加載。
- 1 回答
- 0 關(guān)注
- 107 瀏覽
添加回答
舉報(bào)
0/150
提交
取消