Question

我的HTML文件中有这个小脚本：

$(document).ready(function() {

    var rand = Math.floor((Math.random()*3)+1) //random number between 1 and 3

    $("body").css({ "background": "url(image" + rand + ".jpg)",
                    "background-size": "100% 100%",
                    "background-repeat": "no-repeat"
                 });
});

这个想法是在服务器端我主持3个图像image1.jpg，image2.jpg和image3.jpg。在页面加载时，在客户端生成1到3之间的随机数，根据该数字显示背景图像。

有更有效的方法吗？

PS - 该场景类似于GitHub Notifications页面。鉴于您已阅读所有通知，每次刷新页面时，不同风格的octocat都会问您：）

Answer 1

你可以搬家：

"background-size": "100% 100%",
"background-repeat": "no-repeat"

要

body {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

因为每次都是一样的。

随机选择的图像。服务器端方法需要某种JS，因为您需要动态地告诉body每次背景图像是什么。

您在服务器上托管的图像数量并不重要。重要的是你有一个HTTP请求来获取图像。

Answer 2

使其更具动态性。

<div id="imgselection">
    <img alt="test" src="https://www.example.com/slide1.jpg"/>
    <img alt="test" src="https://www.example.com/slide2.jpg"/>
    <img alt="test" src="https://www.example.com/slide3.jpg"/>
    <img alt="test" src="https://www.example.com/slide4.jpg"/>
</div>

<script>
    $(document).ready(function (jQuery) {
        var images = Array();
        var indexImages = Array();
        jQuery("#imgselection img").each(function (index) {
            images.push(jQuery(this).attr('src'));
            indexImages.push(index);
            jQuery(this).hide();
        });
        var selectedImage = images[Math.floor(Math.random() * images.length)];
        jQuery('body').css('background-image', 'url(' + selectedImage + ')');
      // // OR Show one image
      //  var selectedIndexImage = indexImages[Math.floor(Math.random() * indexImages.length)];
      //  jQuery('#imgselection img').eq(selectedIndexImage).show();
    });
</script>

Answer 3

我建议使用window.onload代替DOM ready。

我相信通过生成rand并在window.onload之前缓存图片，以下内容会更快加载图片：

一旦window.onload触发，图像将从浏览器缓存中加载，因为它已经加载了一次。

var rand = Math.floor((Math.random()*3)+1);
var imgCache = new Image();
imgCache.src = 'image' + rand + '.jpg';
$(window).load(function() {
    $("body").css({ "background": "url(image" + rand + ".jpg)",
                   "background-size": "100% 100%",
                   "background-repeat": "no-repeat"
                  });
});

Answer 4

另一种方法是将图像的路径作为随机提供图像的脚本。这样它就是一个专门的模块，你不需要将它与主要的JavaScript / jQuery代码混合在一起。确保将浏览器设置为不缓存图像。

例如：

body {
    background-image: url(randomImageScript.js);
    background-repeat: no-repeat;
    background-size: cover;
}

在页面刷新时加载不同的图像

4 个答案: