css - 在 HTML 中划分大背景图像是否有助于性能/加载/SEO？

Question

我有一张大 (1920x1080) 图像，我想用作背景。该图像的文件大小并不大 (>180Kb)。

是将这张图片剪切成 3 部分并分别加载还是一张更大的图片更好？是否存在渲染一张大图片或 3 张小图片的性能问题？浏览器加载 3 张小图片会更快吗？它会影响搜索引擎机器人对它的评价吗？

Answer 1

如果您想使用 background-image 加快页面加载速度异步加载，您可以使用以下技巧通过 javascript 来完成(我已经多次使用这个技巧):

从您的 css 和 html 中删除图像，然后创建一个 javascript 函数来预加载您的图像并可选择显示加载叠加层。然后你可以做这样的事情(jQuery):

var backgroundImageUrl = "PathToYourBackgroundImage.png";

$(function() {
    PreLoadOverlayImage(backgroundImageUrl);        
});

// Preloads the image from the given url
// and displays a loading overlay while doing so
function PreLoadOverlayImage(url) {
    var html = "<img class='preloadingImg' src='" + url + "' style='display:none' />";

    $("body").append(html);

    // Self coded function, displays a modal loading screen over the full document
    // to disable interaction while it is loading, this is optional
    $("body").showLoading();
    $(".preloadingImg").load(function () {
        $(".preloadingImg").remove();

        // Remove the modal loading overlay
        $("body").hideLoading();

        // Display background image
        $("body").css("background-image", backgroundImageUrl);
    });
}

它使用浏览器的缓存功能。浏览器获取您正在加载的图像的 url 以确定它是否已经在过去加载过。如果 url 已经为浏览器所知，它将加载缓存的图像，而不是从服务器重新下载它。因此，当您在加载 <img> 后将其指定为您 body 的背景时它将立即加载。