如何仅在加载图像后显示图像,而页面的其余部分正常显示?在每一页上,我都有这样的<html class"page-name">
,css如下html.page-name { background: url(images/page-name.jpg) no-repeat center center fixed; background-size: cover; }
我尝试将javascript作为$(window).load(function(){ $('html').fadeIn(1500);
});
但这显然不起作用,因为在加载图像之前,孔页面是空白的。我希望背景是黑色的,直到加载图像,然后将其替换为黑色背景。我也试过$(window).load(function(){ $('html').addClass('page-title'); });
其中CCD_ 5类具有转换效应但也不起作用。
我如何实现这一点,有一个黑色背景,并在它完全加载后用图像替换它?
谢谢。
动态加载图像,然后在加载时将其添加到背景
$(document).ready(function(){
var img = new Image();
img.onload = function(){
// image has been loaded
$("html.page-name").css("background-image","url('"+image_url+"')");
};
img.src = image_url;
})
jQuery:
// Wait for page load
$(function() {
// apply background image class to body (fade over 500 milliseconds)
$('body').addClass('page-title', 500);
});
CSS:
.page-title {
background-image: url('/path_to/image.jpg');
}