Refresh the page to see a variety of new images loaded each time

Question

Refresh the page to see a variety of new images loaded each time

Incorporated into my HTML file is a concise script:

$(document).ready(function() {

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

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

The concept behind this script is to randomly display one of three images (image1.jpg, image2.jpg, or image3.jpg) hosted on the server when the page loads.

Is there a more effective approach for achieving this?

PS - This situation bears similarities to the GitHub Notifications page. After viewing all notifications, each time you refresh the page, a new version of the octocat appears to welcome you :)

jquery html css dynamic

Answer 1

Answer №1

One option is to transfer:

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

Into

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

Since this code remains constant every time it is used.

If you are dealing with a randomly selected image, you will need some JavaScript on the server side in order to inform body about which background image to display each time.

The number of images stored on the server is not as important as ensuring there is only one HTTP request needed to retrieve the image.

Answer 2

One option is to transfer:

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

Into

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

Since this code remains constant every time it is used.

If you are dealing with a randomly selected image, you will need some JavaScript on the server side in order to inform body about which background image to display each time.

The number of images stored on the server is not as important as ensuring there is only one HTTP request needed to retrieve the image.

Answer 3

Answer №2

Enhance its dynamism.

<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 Display a single image
      //  var selectedIndexImage = indexImages[Math.floor(Math.random() * indexImages.length)];
      //  jQuery('#imgselection img').eq(selectedIndexImage).show();
    });
</script>

Answer 4

Enhance its dynamism.

<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 Display a single image
      //  var selectedIndexImage = indexImages[Math.floor(Math.random() * indexImages.length)];
      //  jQuery('#imgselection img').eq(selectedIndexImage).show();
    });
</script>

Answer 5

Answer №3

My recommendation is to opt for using window.onload over DOM ready.

I am confident that by first generating rand and preloading the image before triggering window.onload, the image will load faster:

By the time window.onload is triggered, the browser cache will ensure swift loading of the image which was preloaded.

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

Answer 6

My recommendation is to opt for using window.onload over DOM ready.

I am confident that by first generating rand and preloading the image before triggering window.onload, the image will load faster:

By the time window.onload is triggered, the browser cache will ensure swift loading of the image which was preloaded.

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

Answer 7

Answer №4

One alternative method involves creating a script that generates and serves an image randomly, allowing it to function as a separate module without the need for integration into the primary JavaScript/jQuery code. It's essential to ensure that the browser does not cache these images.

Here is an example:

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

Answer 8

One alternative method involves creating a script that generates and serves an image randomly, allowing it to function as a separate module without the need for integration into the primary JavaScript/jQuery code. It's essential to ensure that the browser does not cache these images.

Here is an example:

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

Refresh the page to see a variety of new images loaded each time

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

An AJAX request can affect the functionality of an if/else statement

A guide on accessing every element within a "div" tag that begins with a specified text

Tips for preventing a table from showing up while scrolling unnecessarily when utilizing a heading with the CSS position property set to 'sticky'

Guide to redirecting an old tab to a new one after submitting

Make the div larger if the child element exceeds 100%

Tips for allowing divs to be dragged and resized within table cells and rows

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Executing an ASP.NET button click event handler within an update panel can trigger twice unexpectedly when using jQuery to simulate an Enter

Seeking guidance on Ajax .... in need of clarification

Two distinct iterations of the identical jquery version sourced from external sources

How can you efficiently send JSON data from Ajax to a Servlet in a Java environment?

Sharing data between functions in jQuery AJAX promises

Unable to save a URL link in MySQL database using JSON and PHP

Tips for deleting a button from a DataTable file upload feature

Creating a Sticky Table Header with Dynamic Height in React using Material-UI

What is the best way to retrieve the values of various input fields using their numbered IDs and then store them in a MySQL

Display the user's chosen background image as the backdrop for my activity

Press the jQuery button to reset all input fields

What is the process for receiving input from a text field on a Django webpage and subsequently updating an SQL table with the submitted information?

Scripts fail to load randomly due to RequireJs