Question

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

感谢您的帮助！

道格拉斯

HTML CODE：

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

Answer 2

使用HTML 5，您可以这样做：

function changeImage() {
    var image = document.getElementById('mainImage');
    if(image.dataset.changed). {
        return;
    }
    image.dataset.changed = true;

    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 3

使用javascript onload更改图像的最佳和简单方法 Javascript在加载时更改img src

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

</script>

使用javascript onload更改图像

3 个答案: