如何在用户重新加载页面时更新图像/徽标？

Question

我有一个搜索输入框，最重要的是我有一个图像/徽标。

每次用户刷新页面时更改图像/徽标的最有效方法是什么？

            <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>

现在，我使用logo_3.png，但我有 10 。

Answer 1

如果您正在使用后端（我认为您是），那么每次用户访问您的页面时，只需随机构建输出。

以PHP为例：

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

Answer 2

在JavaScript数组中设置img src字符串，并在页面加载时从数组中获取随机元素。假设它们的宽度都相同。

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

Answer 3

首先，你的身份证需要一个字。

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

只要您的所有图片都被命名为＆＃34; logo _ *。png＆＃34;，您就可以将该数字随机化。否则，您需要将文件名添加到数组中，并随机选择索引。

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

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

Answer 4

已经在这里回答：

• How to reload/refresh an element(image) in jQuery
• Changing img src through jQuery: image won't refresh
• How to refresh the src of <img /> with jQuery?
• Force refresh an image in jquery mobile

但基本上，每次刷新页面时，都应该使用附加的随机数调用后端图像服务器（例如：img_1，img_2，img_3 ...）

Answer 5

解决方案：我使用php函数：rand()

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

输出 - 通知图像将随机更改！