第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在加載圖像之前如何實(shí)現(xiàn)加載圖像的平均顏色?

在加載圖像之前如何實(shí)現(xiàn)加載圖像的平均顏色?

PHP
哈士奇WWW 2022-07-29 15:15:08
我想知道谷歌如何處理圖像,以便縮略圖在加載之前顯示顏色。當(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ā)加載。


查看完整回答
反對(duì) 回復(fù) 2022-07-29
  • 1 回答
  • 0 關(guān)注
  • 107 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)