预加载隐藏的CSS图像

Question

我正在开发一个基于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调用,因此不起作用.

我缺少这个问题的任何其他解决方案？

Answer 1

当你说其他方式你的意思是那些不使用Javascript？

<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>

其他没有JS的方法是在你的页面中放置一些html,所以它没有被看到:

<image src="picture.jpg" width="1" height="1" border="0">

或HTML ...

<img src="images/arrow-down.png" class="hiddenPic" />

......和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('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}

然后使用以下内容加载图像:

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>

Answer 2

像其他解决方案一样的硬编码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, "");
    $('<img/>')[0].src = imgUrl;
  }
});

Answer 3

CSS预加载很容易.

示例:

body:after{
    display:none;
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png)
}