gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:32:22 25 4
gpt4 key购买 nike

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

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

最佳答案

如果您想使用 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 的背景时它将立即加载。

关于css - 在 HTML 中划分大背景图像是否有助于性能/加载/SEO?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20698855/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com