jquery background image preloading

问题

I have many div.image, each one has a huge size. How do I append a loader image when the div background is loading and remove the loader image after the background finished loading?

$('.image').append('<img src="image/loading.gif" class="loading" />');

<div class="image" style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div>

回答1:

$('.image').append('<img src="image/loading.gif" class="loading" />');

$.get("https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG", function(data){
    $('.image').html(data);
});

HERE is a different version (that works):

Fiddle: http://jsfiddle.net/maniator/ucdju/

var loading = $('<img src="image/loading.gif" class="loading" />');
$('.image').append(loading);

var image = $('<img>').attr('src', 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG');

image.bind('load', function(data){
    $('.image').css('background-image',"url("+this.src+")")
        .width(this.width).height(this.height);
    loading.remove();
});

回答2:

<style type="text/css">
    .image {
        background: url(image/loading.gif) center center no-repeat;
    }
</style>

<div class="image">
    <div style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div>
</div>

This way your div.image has the loader as background and when the image loads it will just cover the background.

I would use multiple backgrounds on just one div tag but it is not supported in every browser so hence added additional div.

回答3:

background-image is buggy! Use background

Loading div background images in jQuery mobile is successful ~50% of the time. So everyone coding an jqm app will be looking how to ensure the div background image is shown (visible, showing, loading, loaded). Love the jqm docs entry for .load() event (.on('load'..). Basically says .load() isn't cross browser compatible and then offers no solution.

Someone burn down the jQuery docs site

@Neil code works with one HUGE flaw. Which @Moe provides the solution, but his explanation is useless bordering on misleading. @Moe css has the missing gem. Just needs to come out and say it, "background-image won't work and background will!"

Confirms @Moe css tip

http://www.webmasterworld.com/css/3557554.htm

THE COMPLETE SOLUTION

$('#somediv').waitForImages( function() {
  console.log("Images done loading");
},
function(loaded, count, success) {
  var $imageDiv = $(this);
  var url = $imageDiv.css('background-image');
  var lngDivWidth = $imageDiv.css('width');
  var lngDivHeight = $imageDiv.css('height');
  var bckgnd_src = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
  //hardcoded just for demonstration purposes.
  bckgnd_src = 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG';

  if (!success) {
    var $cacheImage = $('<img id="tempImg" />').attr('src', bckgnd_src).on('load',
                      function(e) {
                          $imageDiv.css('background', 'url('+bckgnd_src+')');
                          $imageDiv.width(lngDivWidth).height(lngDivHeight);
                      });
  }
  //jqm takes all opportunities to fail. Force display again. 
  $imageDiv.css('background', 'url('+bckgnd_src+')');
}, true);

To really test this, need a multiple page jqm app. 10 images per page with navigation between pages.

Will only mess up on completely cached pages when this code isn't even run. Plz someone suggestion how to ensure this function can be run even on cached pages.

Dependency WaitForImages plugin (also with incomprehensible docs)

https://github.com/alexanderdickson/waitForImages

来源：https://stackoverflow.com/questions/7812191/jquery-background-image-preloading

标签

jquery

preload