How to update an image/logo when user(s) reload the page?

Question

enter image description here

I have a search input box, and on top of that I have an image/logo.

What is the most efficient way to change image/logo every time user refresh the page ?

            <img class="" id="Default Logo" src="/img/logo/logo_3.png" alt="logo" width="150px" > 

            <span class="input-icon input-icon-right">
                <input id="searchbox" placeholder="Enter SKU or name to check availability " type="text" />
                <i class="ace-icon fa fa-search red"></i>
            </span>

Right now, I use logo_3.png, but I have 10 of them.

score 1 · Answer 1 · answered Feb 27 '15 at 18:43

1

If you are using backend (and I think you are), then just build the output randomly every time when a user visit your page.

In case of PHP for example:

<img id="Logo" src="/img/logo/<?php echo $random_logo_name; ?>.jpg" alt="logo">

answered Feb 27 '15 at 18:43

DNReNTi

521
4
18

score 1 · Answer 2 · answered Feb 27 '15 at 18:44

1

Set your img src strings in a JavaScript array and get a random element from the array on page load. Assuming they are all the same width.

var image = images[Math.floor(Math.random()*images.length)];

answered Feb 27 '15 at 18:44

Revent

2,091
2
18
33

score 0 · Answer 3 · answered Feb 27 '15 at 18:43

First off, your ID needs to be one word.

<img id="default-logo" src="/img/logo/logo_1.png" alt="logo" ... />

As long as all of your images are named "logo_*.png", you're fine to randomize the number. Otherwise, you'll need to add the file names into an array, and select the index randomly.

$(document).ready(function () {
    var image = $('#default-logo'),
        num = ((Math.random() * 10 | 0) + 1);

    image.prop('src', '/img/logo/logo_' + num + '.png');
});

I got the calculation for `num` from [this post](http://stackoverflow.com/a/8063367/1195056). — krillgar, Feb 27 '15 at 18:45

score 0 · Answer 4 · edited May 23 '17 at 12:14

0

Already answered in here:

But basically, every time you refresh a page, you should call your backend image server with an appended random number to it (like: img_1, img_2, img_3...)

edited May 23 '17 at 12:14

Community

1
1

answered Feb 27 '15 at 18:47

JoelCarvalho

22
4

score 0 · Accepted Answer · answered Feb 27 '15 at 19:56

0

Solution : I use php function : rand()

<img src="/img/logo/<?php echo rand(1,10); ?>.jpg" alt="logo" width="200px" >

Output - notice image will randomly change !

enter image description here

answered Feb 27 '15 at 19:56

iori

3,236
12
43
78

How to update an image/logo when user(s) reload the page?

5 Answers5