jquery背景图像预加载
我有很多div.image ，每个都有一个巨大的尺寸。 如何在loader image div背景时附加loader image ，并在后台加载后删除loader image ？
$('.image').append('
');
$('.image').append(''); $.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 = $(''); $('.image').append(loading); var image = $('![]()
').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将加载器作为背景，当图像加载时它将覆盖背景。
我会在一个div标签上使用多个背景但在每个浏览器中都不支持，因此添加了额外的div。
背景图像是越野车！ 使用背景
在jQuery mobile中加载div背景图像是成功的~50％的时间。 因此，编写jqm应用程序的每个人都将关注如何确保显示div背景图像（可见，显示，加载，加载）。 喜欢.load（）事件的jqm docs条目（.on（’load’..）。基本上说.load（）不是跨浏览器兼容的，然后没有解决方案 。
有人烧毁了jQuery docs网站
@Neil代码适用于一个巨大的缺陷。 哪个@Moe提供了解决方案，但是他的解释在误导性方面毫无用处。 @Moe css有缺少的gem。 只需要出来说出来，“背景图像不起作用，背景也会出现！”
确认@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 = $('![]()
').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有人建议如何确保即使在缓存页面上也可以运行此function。
依赖WaitForImages插件（也有难以理解的文档）