javascript - 画像入力読み込みの検出

Question

私はこのコードを使用していました：

<input type="image" ... onLoad="this.style.opacity = 1" />

IE (少なくともopacity:p をサポートするバージョン) では問題なく動作しますが、Chrome ではonLoadイメージが読み込まれたときにイベントが発生しませんでした。

入力の属性は変更される可能性があることに注意してくださいsrc。一部の JavaScript を実行すると、opacity最初にが 0 に設定されます。適切なtransitionプロパティにより、画像がフェードアウトし、新しい画像がフェードインするように見えます。また、<input type="image">サーバーが座標。

私は、透明な GIF ピクセルを使用するの後ろに配置された絶対配置<img>のonLoadとを使用して、ジェリーリグを作成しました。それは機能しますが、醜いです。opacity<input>

<input>Chrome で使用される画像の読み込みが成功したことを検出する方法はありますか、またはbackground-image検出できないようなものですか?

編集：それが役立つ場合は、ここにフィドルがあります

score 1 · Accepted Answer

これは一種のハックですが、Javascriptオブジェクトをインスタンス化し、Imageその上にイベントリスナーを設定し、読み込みが完了したら入力のsrcを設定できます。

http://jsfiddle.net/t8n4y/

免責事項：Chromeでのみテスト済み

HTML：

<input type="image" id="imgInput" />

Javascript：

 var photo = document.getElementById('imgInput');
            var img = new Image();
            img.addEventListener('load', function () { alert("done loading"); }, false);
            img.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random();
            photo.src = img.src;

score 0 · Accepted Answer

<input id="image" type="image" ... onLoad="this.style.opacity = 1" />

  //script ->

  $("#image").change(function () {
                if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    //your onload
                };
                FR.readAsDataURL(input.files[0]);
            }
});

score 0 · Accepted Answer

過去にこのような問題に遭遇したことを覚えています。次のようにして検出できます。

window.onload = function(){
    var input = document.getElementById('input1');
    input.src='';
    input.addEventListener('load', loadImage, false);
    input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg';
}

function loadImage()
{
  console.log("Image is loaded");
}

デモ: http://jsbin.com/ufovom/9/edit

お役に立てれば！

score -2 · Accepted Answer

入力の参照でaddEventListener()メソッドを使用できます。

イベントリスナーを入力に追加する前に、ページをロードする必要があることに注意してください。これを行うには、ウィンドウオブジェクトに別のイベントリスナーを適用してから、入力を参照する関数を起動します。

javascript - 画像入力読み込みの検出

4 に答える 4

Related

Reference