jquery背景图片预加载

问题描述：

我有很多div.image，每个都有很大的尺寸。如何在div背景加载时追加loader image，并在后台加载完成后删除loader image？jquery背景图片预加载

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

这里是一个不同的版本（的作品）：

小提琴：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看到我的更新 – Neal

好的，谢谢你的更新。 –

答

<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有装载机为背景，当ima ge加载它只会覆盖背景。

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

答

背景图像是越野车！使用背景

在jQuery mobile中加载div背景图片是成功的~50％的时间。所以编码jqm应用程序的每个人都会查看如何确保div背景图像显示（可见，显示，加载，加载）。爱情对于.load（）事件（。上（“负荷” ..）的JQM文档条目。基本上说.load（）是不兼容的跨浏览器，然后没有提供解决方案。

有人烧毁jQuery文档站点

@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个图像，页面间导航。

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

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

https://github.com/alexanderdickson/waitForImages

什么是waitForImages的文档无法理解？ – alex

jquery背景图片预加载

相关推荐