Выцветание в фоновом изображении - PullRequest
Новая
       22

Выцветание в фоновом изображении

20 голосов
/ 10 июня 2009

У меня есть веб-страница, которая использует большое изображение для фона. Я надеялся использовать jQuery для загрузки изображения после его загрузки (в основном способ, которым bing.com загружает свое фоновое изображение). Это возможно с JQuery? Если так, есть ли плагин, который вы бы порекомендовали?

Ответы [ 4 ]

25 голосов
/ 10 июня 2009

Вы можете сначала загрузить изображение, а затем, когда оно завершит загрузку, установить его как background-image. Таким образом, браузер будет (надеюсь) загружать фоновое изображение из кэша, а не загружать его заново. Как вы просили его в качестве плагина: 

 $.fn.smartBackgroundImage = function(url){
  var t = this;
  //create an img so the browser will download the image:
  $('<img />')
    .attr('src', url)
    .load(function(){ //attach onload to set background-image
       t.each(function(){ 
          $(this).css('backgroundImage', 'url('+url+')' );
       });
    });
   return this;
 }

Используйте это так: 

 $('body').smartBackgroundImage('http://example.com/image.png');
11 голосов
/ 10 июня 2009

Эта статья может быть полезна. Копирование оттуда:

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');
});
1 голос
/ 10 июня 2009

Вы не можете использовать фоновые изображения CSS, потому что невозможно прикрепить событие к загрузке изображений (насколько я знаю).

Итак, я попробую, но не проверял:

HTML: 

<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
  ... content ...
</div>
</body>

CSS: 

.bgimage { position: absolute: }

Javascript: 

$(function() {
   $(".bgimage")
      .css("opacity",0);
      .load(function() { $(this).fadeIn(); });
});
0 голосов
/ 11 июня 2009

Вы можете пойти со следующим трюком, извините, если он немного грязный.

Сценарий: 

        jQuery.preloadImages = function() {
        for (var i = 0; i < arguments.length; i++) {
            jQuery("<img>").attr("src", arguments[i]);
            $('.box1').attr('preloadURL', arguments[0]);
        }
    }

    $.preloadImages("sky.jpg");

    $(document).ready(function() {
        if ($('.box1').attr('preloadURL') == 'sky.jpg') {
            $('.box1').css({ 'background-image': 'url(sky.jpg)' },$('.box1').fadeIn(1000));
        }
    });

Разметка: 

<div class="Content">
        <label>Search Bing</label>
        <input type="text" />
        <input type="button" value="search" />
    </div>
<div class="box1"></div>

CSS: 

.box1 {background-repeat:no-repeat; width:800px; height:600px; display:none; position:relative;}
    .Content { position:absolute; left:20px; top:20px; z-index:100;}
    .Content label { color:White;}

надеюсь, это поможет

Небольшой образец: http://xgreen.co.uk/test.htm

...