Question

我有很多div.image，每个都有很大的尺寸。如何在加载div背景时附加loader image，并在后台加载后删除loader image？

$('.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>

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

这是一个不同的版本（有效）：

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

Answer 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>

这样你的div.image将加载器作为背景，当图像加载时，它将覆盖背景。

我会在一个div标签上使用多个背景，但每个浏览器都不支持它，因此添加了额外的div。

Answer 3

背景图片有问题！使用背景

在jQuery mobile中加载div背景图像成功~50％的时间。因此，编写jqm应用程序的每个人都将关注如何确保显示div背景图像（可见，显示，加载，加载）。喜欢.load（）事件的jqm docs条目（.on（'load'..）。基本上说.load（）不是跨浏览器兼容的，然后不提供解决方案。

有人烧毁了jQuery docs网站

@Neil代码适用于一个巨大的缺陷。哪个@Moe提供了解决方案，但他的解释与误导性无关。 @Moe css有缺少的宝石。只需要出来说出来，“背景图像将不起作用，背景将会出现！”

确认@Moe css提示

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

完整的解决方案

$('#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);

要真正测试这个，需要一个多页面的jqm应用程序。每页10张图片，页面之间有导航。

当此代码甚至没有运行时，只会弄乱完全缓存的页面。 Plz有人建议如何确保即使在缓存页面上也可以运行此功能。

依赖WaitForImages插件（也包含难以理解的文档）

https://github.com/alexanderdickson/waitForImages

jquery背景图像预加载

3 个答案: