在加载图像之前如何实现加载图像的平均颜色?

我想知道谷歌如何处理图像,以便缩略图在加载之前显示颜色。

当我搜索某些东西时,结果就像

http://img4.mukewang.com/62e3891c0001aae608310653.jpg

当我检查照片时,它显示它们是一个锚标签,其背景颜色类似于整体实际图像颜色


我有一个充满图像的网站,由于请求数量众多,网站性能非常糟糕


我使用了这个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 颜色作为占位符,然后使用延迟图像加载技术加载实际图像以减少请求数量


哈士奇WWW
浏览 89回答 1
1回答

MM们

第一步是防止预先加载图像。对于使用标签加载的图片,浏览器使用标签的 src 属性来触发图片加载。无论它是 HTML 中的第 1 个还是第 1000 个图像并且在屏幕外,如果浏览器获取 src 属性,它将触发图像加载。因此,要延迟加载此类图像,请将图像 URL 放在 src 以外的属性中。假设我们在图像标签的 data-src 属性中指定了图像 URL。现在 src 为空,浏览器不会触发图像加载现在我们已经停止了前期加载,我们需要告诉浏览器何时加载图像。为此,我们检查一旦图像(即它的占位符)进入视口,我们就会触发加载。
打开App,查看更多内容
随时随地看视频慕课网APP