加载图像后显示整页图像 [英] Display full page image after image is loaded
问题描述
如何仅在图像加载后如何显示图像，而页面的其余部分却可以正常显示?在每个页面上，我都有类似的<html class"page-name">和css如下html.page-name { background: url(images/page-name.jpg) no-repeat center center fixed; background-size: cover; }
How do I display a image only after it loads but the rest of the page shows normally? On each page I have something like this <html class"page-name"> and the css is as follows html.page-name { background: url(images/page-name.jpg) no-repeat center center fixed; background-size: cover; }
我尝试将JavaScript用作$(window).load(function(){ $('html').fadeIn(1500);
});
I tried to do the javascript as $(window).load(function(){ $('html').fadeIn(1500);
});
，但这显然不起作用，因为在加载图像之前，孔页面为空白.我希望在加载图像之前将背景设为黑色，然后将其替换为黑色背景.我也尝试过$(window).load(function(){ $('html').addClass('page-title'); });
其中page-title类具有过渡效果，但也不起作用.
but this obviously doesn't work because the hole page is blank until the image is loaded. I want the background to be black until the image is loaded and than replace it to the black background. I also tried $(window).load(function(){ $('html').addClass('page-title'); });
where page-title class has transition effect but also doesn't work.
在黑色背景下完全加载后如何用黑色背景替换图像?
How do I achieve this, having a black background and replace it with an image after it fully loads ?
谢谢.
推荐答案
动态加载图片，然后在其加载时将其添加到后台
Load image dynamically and then on its onload add it to the background
$(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;
})
这篇关于加载图像后显示整页图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
