使用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更改圖片

回答

相關問題