2

1つの画像用の単純な画像プリローダーを作成しようとしています。画像をロードし、終了した場合は、それを表示するためのイベントを発生させる必要があります。これを行う最も簡単な方法は何ですか？

document.createElement（ "img"）のような純粋なjavascriptソリューションしか知りませんが、jqueryを使用する最良の方法は何ですか？

私がこれまでに得たもの（しかし、それが最適な方法であるかどうかはわかりません）：

var img = $("<img src='/images/myPic.jpg'>");
img.bind("load", function(){alert("loaded!")});

ありがとう

4

3 に答える 3

2

正しく理解していれば、テンプレートやマスターページなど、css属性を使用して画像を書き込み、jqueryでイベントを書き込んで表示します。

<img id="preloader" src="/myimg.jpg" style="display:none;" />


$("#some-element").ready(function(){
      $("#preloader").show();
});
于 2010-10-19T23:02:12.260 に答える
1

JSで手動で行うので、jQueryでこれを行う必要はありませんでした。

var img = new Image();
img.onLoad = function() {alert("Image has been loaded!");};
img.src = "path/to/img.ext";

または、プロジェクトですでにjQueryを使用している場合は、Thickboxを使用します。ソースを見ると、上記のようなものがあります。

それを表示するには、最初にdisplay：none;に設定されている事前定義されたdivをソースファイルに入れてから、JSを使用してそのコンテンツを画像に設定し、表示するように変更します。あなたはpcgalore.comでこれの例を見ることができます、回転する引用バナーはそれを使用します。

于 2010-10-19T23:08:33.447 に答える
0

jqueryの.on（）メソッドを使用して、セレクターにアタッチします。

<img id="preLoader" src="/images/myPic.jpg" alt="My Pic" style="display: none;" />

$('#preLoader').on('load', function () {
    $(this).fadeIn();
});
于 2014-01-24T16:32:00.487 に答える