使用javascript更改图片

我在尝试使用Javascript更改图像。从使用其他主题，我几乎可以找到所有的工作;然而，gif动画不是'动画'。我相信这是因为JS处于某种无限循环意味着图像不断加载;因此，动画不播放。使用javascript更改图片

感谢您的帮助！

道格拉斯

HTML代码：

<img id="mainImage" onload="changeImage()" src="images/ios_full.gif">

JAVASCRIPT：

var isMobile = { 
    android: function() { 
     return navigator.userAgent.match(/Android/i); 
    }, 
    ios: function() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    }, 
    othermobile: function() { 
     return navigator.userAgent.match(/Blackberry|Opera Mini|IEMobile/i); 
    }, 
}; 

function changeImage() { 
    var image = document.getElementById('mainImage'); 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    if ((isMobile.android()) && (w < 500 || h < 500)) { 
     image.src = "images/android_short.gif"; 
    } else if (isMobile.android()) { 
     image.src = "images/android_full.gif"; 
    } else if ((isMobile.ios()) && (w < 500 || h < 500)) { 
     image.src = "images/ios_short.gif"; 
    } else if (isMobile.ios()) { 
     image.src = "images/ios_full.gif"; 
    } else if (isMobile.othermobile()) { 
     image.src = "images/other.gif"; 
    } else if (w < 800 || h < 500) { 
     image.src = "images/ios_short.gif"; 
    } else { 
     image.src = "images/ios_full.gif"; 
    } 
}

来源

2015-11-02 Douglas

你是正确的，在onload被解雇每次设置'image.src'要么使用时间一个全局变量或图像标签上的数据属性，作为检查是否已经完成onload的标志，或者在文档加载时更改代码以触发onload，而不是图像加载 –

或者如果您正在使用jQuery你可以使用一个绑定来让事件触发一次。 – user92454

谢谢Jaromanda X＆user92454！非常感谢！ – Douglas

最简单的方法是简单地杀死功能（其重新分配给一个空函数）在第一次完成之后，无论如何你都不会再使用它：

function changeImage() { 
    var image = document.getElementById('mainImage'); 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    if ((isMobile.android()) && (w < 500 || h < 500)) { 
     image.src = "images/android_short.gif"; 
    } else if (isMobile.android()) { 
     image.src = "images/android_full.gif"; 
    } else if ((isMobile.ios()) && (w < 500 || h < 500)) { 
     image.src = "images/ios_short.gif"; 
    } else if (isMobile.ios()) { 
     image.src = "images/ios_full.gif"; 
    } else if (isMobile.othermobile()) { 
     image.src = "images/other.gif"; 
    } else if (w < 800 || h < 500) { 
     image.src = "images/ios_short.gif"; 
    } else { 
     image.src = "images/ios_full.gif"; 
    } 
    changeImage = function(){} // just this line 
}

来源

2015-11-02 03:57:59 Shomz

这工作完美！谢谢您的帮助！ – Douglas

不客气，很高兴我能帮上忙！ – Shomz

最简便的方法来负载与JavaScript的onload 的Javascript变化IMG SRC更改图像

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('#logo img').attr('src','https://image-URL'); 
}); 

</script>

来源

2017-11-28 09:21:37

使用javascript更改图片

回答

相关问题