5

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

<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検出できないようなものですか?

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

4

4 に答える 4

1

これは一種のハックですが、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;
于 2013-02-22T00:09:07.390 に答える
0 
<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]);
            }
});
于 2015-10-25T11:22:02.760 に答える
0

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

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

お役に立てれば！

于 2013-02-22T00:00:39.693 に答える
-2

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

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

于 2013-02-21T23:31:20.600 に答える