预加载隐藏的CSS图像
我正在开发一个基于jquery的主页，其中包含5个左右的隐藏div，每个div包含几个背景css图像。
问题是浏览器不会将css图像加载到DOM中，直到显示父图层的可见性，导致图像在图层变得可见时缓慢加载。
我已经考虑过的解决方案：
- CSS sprites（为此重新设计太多工作，并且在显示/隐藏div时不会真正起作用）
- 这个jQuery插件自动加载CSS背景图像（根据许多其他人的报告，对我来说根本不起作用）。
-
通过js预加载图像：
$(function() { function preloadImg(image) { var img = new Image(); img.src = image; } preloadImg('/images/home/search_bg_selected.png'); });这个解决方案似乎将图像加载到dom中两次…一旦js加载它，然后再次加载它的div层变得可见…所以它进行2次HTTP调用，因此不起作用。
我缺少这个问题的任何其他解决方案？
当你说其他方式你的意思是那些不使用Javascript？
其他没有JS的方法是在你的页面中放置一些html，所以它没有看到：
或HTML ...
......和CSS ......
.hiddenPic { height:1px; width:1px; }
更多JavaScript方法：
function preload(images) { if (document.images) { var i = 0; var imageArray = new Array(); imageArray = images.split(','); var imageObj = new Image(); for(i=0; i<=imageArray.length-1; i++) { //document.write('
');// Write to page (uncomment to check images) imageObj.src=images[i]; } } }
然后使用以下内容加载图像：
CSS预加载很简单。
示例 ：
body:after{ display:none; content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) }
像其他解决方案一样的硬编码URL建议对代码维护征税。 避免这种情况并使用jQuery制作通用解决方案相对容易。
此函数选择所有隐藏元素，检查它们是否具有背景图像，然后将它们加载到隐藏的虚拟元素中。
$(':hidden').each(function() { //checks for background-image tab var backgroundImage = $(this).css("background-image"); if (backgroundImage != 'none') { var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, ""); $('![]()
')[0].src = imgUrl; } });
“这个解决方案似乎将图像加载到dom中两次……一旦js加载它，然后再加载它的div层变得可见……所以它会产生2个http调用，因此无法工作”
第二个http请求应该在304（未修改）中响应，所以我猜这没关系？ 另一种选择是通过jQuery加载图像，然后通过DOM插入内嵌作为背景图像，如：
jQuery.fn.insertPreload = function(src) { return this.each(function() { var $this = $(this); $(new Image()).load(function(e) { $this.css('backgroundImage','url('+src+')'); }).attr('src',src); }); }; $('div').insertPreload('[huge image source]');
浏览器开始支持元素的rel="..."属性的prefetch和preload属性。
Addy Osmani 关于预加载和预取属性的post非常出色，并描述了何时应该使用它们：
预加载是浏览器的早期提取指令，用于请求页面所需的资源（关键脚本，Web字体，英雄图像）。
预取提供稍微不同的用例 – 用户将来的导航（例如，在视图或页面之间），其中获取的资源和请求需要跨导航持久存在。 如果页面A发起对页面B所需的关键资源的预取请求，则可以并行完成关键资源和导航请求。 如果我们对此用例使用了预加载，则会在页面A的卸载时立即取消。
该元素的使用方式如下：
我正在设计一个包含多个步骤的表单，每个表单都有不同的背景图像。 当Chrome下载下一个背景图像时，此模式可解决步骤之间的“闪烁”问题。