加载图像后显示整页图像
如何在加载后显示图像,但页面的其余部分显示正常? 在每个页面上我都有类似 ,而css如下:
html.page-name { background: url(images/page-name.jpg) no-repeat center center fixed; background-size: cover; }
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'); });
page-title
类具有转换效果,但也不起作用。
如何实现这一点,具有黑色背景并在完全加载后将其替换为图像?
谢谢。
动态加载图像,然后在其onload上将其添加到后台
$(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'); }