javascript - 画像の読み込みを変更する

Question

ホームページのdivに画像を含む単純なWebページがあり、ページが（1回だけ）ロードされた後、JavaScriptを使用して代替画像の画像を変更したいのですが、現在、アニメーションGIFを使用しています。これを行いますが、javascriptを使用することをお勧めします。

JavaScriptのスキルが限られています。

ありがとう

Answer 1

私はあなたがjQueryを使用しないと仮定しているので、ページがロードされた後に1つの画像をフェードアウトし、他の画像をフェードインする単純なjsサンプルを作成しました。ここで例を確認できますhttp://jsfiddle.net/rJzPV/7/

function fadeOut(elem, time, callbackFn) {
    var startOpacity = elem.style.opacity || 1;
    elem.style.opacity = startOpacity;

    (function go() {
        elem.style.opacity -= startOpacity / (time / 100);

        // for IE
        elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

        if (elem.style.opacity > 0.11)
            setTimeout(go, 100);
        else {
            elem.style.display = 'none';
            if (callbackFn)
                callbackFn();
        }
    })();
}

function fadeIn(elem, time) {
    var startOpacity = 0.1;
    elem.style.opacity = startOpacity;
    elem.style.display = "";
    (function go() {
        elem.style.opacity -= -startOpacity / (time / 1000);

        // for IE
        elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

        if (elem.style.opacity < 1)
            setTimeout(go, 100);
    })();
}

window.addEvent('load', function () {
    function changePicture() {
        var _myImg = document.getElementById("myImage");
        _myImg.src = "http://www.google.com/logos/2012/klimt12-hp.jpg";
        fadeIn(_myImg, 1000);
    }

    var _myImg = document.getElementById("myImage");
    fadeOut(_myImg, 1000, changePicture);

});