javascript - 使用 javascript onload 更改图像

Question

我正在尝试使用 Javascript 更改我的图像。通过使用其他主题，我几乎可以正常工作；但是，gif 动画不是“动画”。我相信这是因为 JS 处于某种无限循环中，这意味着图像在不断加载；因此，动画不会播放。

感谢您的帮助!

道格拉斯

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";
    }
}

Answer 1

最简单的方法是在第一次完成后简单地终止该函数(将其重新分配给一个空函数)，因为无论如何您都不会再次使用它:

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
}