jquery背景图片预加载答案

【问题标题】：jquery background image preloadingjquery背景图片预加载
【发布时间】：2013-10-09 21:22:03
【问题描述】：

我有很多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>

【问题讨论】：

标签： jquery preload

【解决方案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();
});

【讨论】：

我有很多div.image，所以我应该写一个each函数并在jquery代码中重复所有的图像url地址？你有其他更简单的方法吗？谢谢。
@yulichika 记得做image.remove()，如果你不这样做可能会有一些javascript泄漏

【解决方案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。

【讨论】：

【解决方案3】：

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

在 jQuery mobile 中加载 div 背景图片的成功率约为 50%。所以每个编写 jqm 应用程序的人都会研究如何确保显示 div 背景图像（可见、显示、加载、加载）。喜欢 .load() 事件 (.on('load'..) 的 jqm 文档条目。基本上说 .load() 不兼容跨浏览器，然后 不提供解决方案。

有人烧毁了 jQuery 文档站点

@Neil 代码存在一个巨大的缺陷。哪个@Moe 提供了解决方案，但他的解释几乎是误导性的。 @Moe css 缺少宝石。只需要站出来说，“background-image 不行，background 可以！”

确认@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 张图片，可在页面之间导航。

只有在这段代码甚至没有运行时，才会在完全缓存的页面上搞砸。请有人建议如何确保即使在缓存页面上也可以运行此功能。

Dependency WaitForImages 插件（也带有难以理解的文档）

https://github.com/alexanderdickson/waitForImages

【讨论】：

waitForImages 的文档有什么难以理解的地方？