在加载图像之前，我将如何实现加载图像的平均颜色？

Question

我想知道 google 如何处理图像，以便缩略图在加载前显示颜色。

当我搜索一些东西时，结果是这样的

当我检查照片时，它显示它们是一个锚标记，其背景颜色与实际图像的整体颜色相似

我有一个充满图片的网站，由于请求过多，网站性能非常糟糕

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

Answer 1

第一步是防止预先加载图像。对于使用标签加载的图片，浏览器使用标签的 src 属性来触发图片加载。无论它是您 HTML 中的第 1 个还是第 1000 个图像，并且在屏幕外，如果浏览器获取 src 属性，它都会触发图像加载。

因此，要延迟加载此类图像，请将图像 URL 放在 src 以外的属性中。假设我们在图像标签的 data-src 属性中指定了图像 URL。现在 src 为空，浏览器不会触发图片加载

现在我们已经停止了前期加载，我们需要告诉浏览器何时加载图像。

为此，我们检查一旦图像（即它的占位符）进入视口，我们就会触发加载。

在加载图像之前，我将如何实现加载图像的平均颜色？

How would I implement loading the average color of an image before it is Loaded?

html

javascript

css

php

lazy-loading