在背景图像中褪色 [英] Fading in a background image

问题描述

我有一个网页，其背景使用大图像.我希望下载后可以使用jQuery加载图像(基本上是bing.com加载其背景图像的方式). jQuery有可能吗?如果是这样，您有没有推荐的插件?

I have a web page that uses a large image for its background. I was hoping to use jQuery to load the image once it is downloaded (basically the way that bing.com loads its background image). Is this possible with jQuery? If so, is there a plugin that you would recommend?

推荐答案

此文章可能有用.从那里复制:

This article may be useful. Copying from there:

HTML

<div id="loader" class="loading"></div>

CSS

DIV#loader {
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}

/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
DIV#loader.loading {
  background: url(images/spinner.gif) no-repeat center center;
}

JavaScript

// when the DOM is ready
$(function () {
  var img = new Image();

  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();

      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);

      // fade our image in to create a nice effect
      $(this).fadeIn();
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
});

这篇关于在背景图像中褪色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！