jQuery背景图片预加载 [英] jquery background image preloading

问题描述

我有很多div.image，每个都有很大的尺寸.在加载div背景时如何添加loader image并在背景加载完成后删除loader image?

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>

推荐答案

$('.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是另一个版本(有效):

---

HERE is a different version (that works):

提琴: 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();
});

这篇关于jQuery背景图片预加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！