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

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

首先，您的ID必须是一个单词。

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

只要您所有的图像都被命名​​为“ logo _ *。png”，就可以将数字随机化。 否则，您需要将文件名添加到数组中，然后随机选择索引。

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

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

Answer 4

已经在这里回答：

• 如何在jQuery中重新加载/刷新元素（图像）
• 通过jQuery更改img src：图片不会刷新
• 如何使用jQuery刷新<img />的src？
• 在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" >

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