问题:

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; }

I tried to do the javascript as $(window).load(function(){ $('html').fadeIn(1500); });

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 ?

Thank you.

回答1:

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;
})

回答2:

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');
 }

Display full page image after image is loaded

问题:

回答1:

回答2:

jQuery:

CSS:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮