平滑预加载大背景图像

更好的方法可能是使用jquery并在加载后淡入背景图像。你也可以尝试在用户点击下一页之前预装下一张图片,让它更平滑。

例外的是一些不懂网站的人来点击一些东西,他们不在乎任何东西,除了看起来漂亮。

http://jpegclub.org/ )或特定于PNG的工具( http://www.aboutonlinetips.com/optimize-and-compress-png-files/ ).

但是要执行您特别要求的操作—隐藏页面上的所有内容,直到它准备就绪,然后将其加载—您可以使用jQuery并执行以下操作:

$(function(){
    var bgimage = new Image();      
    bgimage.src="{your giant image's URL goes here}";       

    $(bgimage).load(function(){
        $("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();                  
    });
});

我有fadeIn(),以防你想隐藏页面上的所有内容,直到它准备好。这意味着你应该把这个隐藏起来。

出于某种原因,fadeIn()比show()或通过removeClass()简单地删除“隐藏”类效果更好,如果您采用这种方法的话。使用后两种方法,标签似乎会调整其高度以适应页面的内容,这可能导致无法完整显示背景图像。

老实说,我并不推荐这种方法:p

这可能是一种只在背景图像准备好时才显示背景图像的好方法,避免显示部分加载的图像。。。

较慢的加载速度只是使用大型图像的一种折衷。

你可以用 data URIs 在现代浏览器中缓解这个问题,并回到您当前的IE6/7技术。