通过JavaScript更改Img Src

Question

Hi I am trying to change the images in my gallery when the page loads. 嗨，我正在尝试在页面加载时更改图库中的图像。 I am trying to do it the way that has been most posted about on here 我正在尝试按照此处最常发布的方式进行操作

function changeImg(){
            var img1 =  document.getElementById("wows1_0");                
            img1.src = "WOWSlider/data1/images/ContactSupport.jpg";
        }

then on calling it here 然后在这里打电话

<body onload="changeImg()">

and here is the code of my gallery 这是我画廊的代码

<div id="wowslider-container1" class="grid_7 alignGallery">
<div class="ws_images"><ul>
        <li><img src="WOWSlider/data1/images/BookARoom.jpg" alt="full screen slider" title="full screen slider" id="wows1_0"/></li>
        <li><img src="WOWSlider/data1/images/ContactSupport.jpg" alt="ContactSupport" title="ContactSupport" id="wows1_1"/></li>
    </ul></div>
<div class="ws_thumbs">
    <div>
        <a href="#wows1_0" title="full screen slider"><img src="WOWSlider/data1/tooltips/bookaroom.jpg" alt="" /></a>
        <a href="#wows1_1" title="ContactSupport"><img src="WOWSlider/data1/tooltips/contactsupport.jpg" alt="" /></a>
    </div>
</div>               
<div class="ws_shadow"></div>

But every time I call the function The images are never changed. 但是每次我调用函数时，图像都不会改变。

I would be very grateful if anyone could provide any guidance or assistance. 如果有人可以提供任何指导或帮助，我将不胜感激。

Answer 1

You need to preload images first: 您需要先预加载图像：

var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
            images[i] = new Image()
            images[i].src = preload.arguments[i]
    }
}
preload(
    "WOWSlider/data1/images/ContactSupport.jpg",
    "WOWSlider/data1/images/OtherImage.jpg"
);

Answer 2

First, remove the body onLoad. 首先，删除主体onLoad。 Second, this should be your html script: 其次，这应该是您的html脚本：

<body>
<div id="wowslider-container1" class="grid_7 alignGallery">
    <div class="ws_images">
        <ul>
            <li><img src="WOWSlider/data1/images/BookARoom.jpg" alt="full screen slider" title="full screen slider" id="wows1_0"/></li>
            <li><img src="WOWSlider/data1/images/ContactSupport.jpg" alt="ContactSupport" title="ContactSupport" id="wows1_1"/></li>
        </ul>
    </div>
    <script type="text/javascript">
        changeImg();
    </script>
    <div class="ws_thumbs">
        <div>
            <a href="#wows1_0" title="full screen slider"><img src="WOWSlider/data1/tooltips/bookaroom.jpg" alt="" /></a>
            <a href="#wows1_1" title="ContactSupport"><img src="WOWSlider/data1/tooltips/contactsupport.jpg" alt="" /></a>
        </div>
    </div>               
    <div class="ws_shadow"></div>
</body>

and this should be your javascript: 这应该是您的javascript：

function changeImg(){
    var img1 =  document.getElementById("wows1_0");            
    img1.src = "WOWSlider/data1/images/ContactSupport.jpg";
}

Answer 3

I'd replace the onload event with a javascript right before the closing body tag. 我会在结束body标签之前用JavaScript替换onload事件。
Are you looking for something like this? 您是否正在寻找这样的东西？

var $img = document.getElementById('yourImg');
var path = 'http://your-new-path-to-image.com';
$img.src = path;
// or
// $img.setAttribute('src', path);

http://codepen.io/codelabr/pen/RNZobB http://codepen.io/codelabr/pen/RNZobB

Best regards 最好的祝福

通过JavaScript更改Img Src

问题描述

3 个解决方案

解决方案1
0 2015-01-28 12:56:46

解决方案2
0 2015-01-28 12:59:56

解决方案3
0 2015-01-28 13:02:56

通过JavaScript更改Img Src

问题描述

3 个解决方案

解决方案1 0 2015-01-28 12:56:46

解决方案2 0 2015-01-28 12:59:56

解决方案3 0 2015-01-28 13:02:56

解决方案1
0 2015-01-28 12:56:46

解决方案2
0 2015-01-28 12:59:56

解决方案3
0 2015-01-28 13:02:56