加载所有背景图像时显示页面

Display page when all background images are loaded

本文关键字：显示 图像 背景 加载      更新时间：2023-09-26

我希望页面和其中的内容只有在我的大背景图像加载后才能显示。我试了很多方法，就是找不到方法。已尝试$（文档）。就绪-不起作用。

body
{
	padding: 0;
	margin: 0;
	background-color: #ffffff;
	width: 100%;
	overflow-x: hidden;
	background: url('images/dark.jpg');
	background-attachment: fixed;
	background-size: cover;
}

您可以显示加载动画的覆盖

<div id="preloader"></div>
#preloader 
{ 
    position: fixed; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center; 
}

并在所有内容加载后将其设置为CCD_ 1

window.onload = function() {
    document.querySelector('#preloader').style.display = "none";
};

您可以使用setTimeout函数在后台显示数据。

感谢

试试这个：

你必须对每个图像都这样做。例如：

$('selector_images').each(function(idx, img) {
    var img = $(img).attr('src', '/big_image.jpg')
.on('load', function() {
        if (!this.complete) {
            console.log('broken image!');
        } else {
            //Show content
        }
    });
});

希望这能有所帮助

相关文章：