jquery – 加载适当大小的整页背景图像

我需要创建一个全页背景.因此,这将工作：

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

所以我会加载一个大的背景图像(大约2000px宽度),但我认为这个解决方案非常糟糕,因为移动转移也会加载这个大图像.

我试图加载附加到屏幕大小的图像：

jQuery(document).ready(function($) {    
    var win = $(window);

    win.resize(function() {

        var win_w = win.width(),win_h = win.height(),$bg    = $("#bg");

        // Load narrowest background image based on 
        // viewport width,but never load anything narrower 
        // that what's already loaded if anything.
        var available = [
            1024,1280,1366,1400,1680,1920,2560,3840,4860
        ];

        var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;

        if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
            var chosen = available[available.length - 1];
            for (var i=0; i

所以我需要一个像这样的图像元素：

但这不是真正的背景(就像第一个解决方案).是否可以将jquery脚本调整为html-background-url？
或者有人知道更简单的解决方案吗？

我还想首先加载图像(！),之后淡化网站…我想我需要.load() – jQuery的功能;但我不知道怎么把这个放在剧本里……

最佳答案

这是一个带有过滤器的更新的媒体查询

@media screen and (max-width:1024px){

    img { 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largeImage.png',sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largeImage.png',sizingMethod='scale')";
          background: url(images/largerImage.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
}

@media screen and (max-width:1140px){

    img { 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largerImage.png',sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largerImage.png',sizingMethod='scale')";
          background: url(images/largerImage.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
}

你可以在这里找到它的参考
http://css-tricks.com/perfect-full-page-background-image/