0

これを考えると、画像をプリロードします：

$('<img />')
    .attr('src', 'source')
    .load(function(){
        $('.profile').append( $(this) );
        // Your other custom code
    });

同じことをする方法を知っていますが、複数の画像がありますか?

私は次のようなものを試しました:

var img1 = new Image();
var img2 = new Image();
$(img1).attr('src', 'source1');
$(img2).attr('src', 'source2');

$(img1,img2).load(
 function () {
  //code after loading
 }
);

しかし、うまくいきません！

何か案は？

4

5 に答える 5

4

最後の試み

私が知る限り、画像がいつ読み込まれるかを確認し、それを複数回実行できるようにしたいと考えています。前の試行と独自のコードの問題は、新しいイメージ ソースが設定されて実行された後にのみ「ロード」ハンドラが適用されることです。サイズはこちらをご試着ください：

$(function () {
    var images = ['image1.jpg','image2.jpg' /* ... */ ];
    var imageObjects = [];
    var imagesToLoad = 0;

    for (i = 0, z = images.length; i < z; i++) {
        imageObjects[i] = new Image();
        imagesToLoad++;
        $(imageObjects[i])
            .load(function () {
                if (--imagesToLoad == 0) {
                    // ALL DONE!
                }
                // anything in this function will execute after the image loads
                var newImg = $('<img />').attr('src',$(this).attr('src'));
                $('.profile').append( $(newImg) ); // I assume this is the code you wanted to execute
            })
            .attr('src',images[i]);
            // Notice that the 'attr' function is executed AFTER the load handler is hooked
    }
});

[旧] 新しい試み

var images = [ /* you get it by now */ ];
for (i=0,z=images.length;i<z;i++) {
    $('<img />')
        .attr('src', images[i])
        .load(function(){
            $('.profile').append( $(this) );
            // Your other custom code
        });
}

元の投稿

この記事からのアイデア

$(document).ready(function(){
    var images = ["image1.jpg","image2.jpg"];
    var loader = new Image();

    for (i=0,z=images.count;i<z;i++) {
        loader.src = images[i];
        // insert some code here to do something with the now-loaded image
    }
    // do something with the now-loaded images.
});

あるいは、

var images = ["image1.jpg","image2.jpg"];
var loader = [];
$(document).ready(function(){

    for (i=0,z=images.count;i<z;i++) {
        loader[i] = new Image();
        loader[i].src = images[i];
        // insert some code here to do something with the now-loaded image
    }
    // do something with the now-loaded images, using the loader array
});
于 2009-11-25T18:31:28.470 に答える
0

「src」属性を設定すると、ロードがトリガーされます。「src」属性を設定する前に、イベントを登録する必要があります。これを試して：

var img1 = new Image(); 
var img2 = new Image(); 
$([img1,img2]).load( function () { //code after loading } );
$(img1).attr('src', 'source1');
$(img2).attr('src', 'source2');

お役に立てれば！

更新しました

var images = [ /* you get it by now */ ];
for (i=0,z=images.length;i<z;i++) {
$('<img />')
  .load(function(){
    $('.profile').append( $(this) );
    // Your other custom code
  })  
  .attr('src', images[i]);
  /* you may also try to add .trigger('load') at the end to force it */
}

-スティーブン

于 2009-11-25T18:34:25.390 に答える
0

私は最近、この悪夢を経験しました。画像読み込みイベントに関する苛立たしい問題について述べた StackOverflow の質問がいくつかあります。

クロスブラウザーで実際に動作する方法の 1 つは、タイマーを使用して、イメージの完全なプロパティ (true になるまで) とイメージの幅プロパティ (0 以外になるまで) の両方を監視することです。要件のペアがすべての画像に当てはまるまで、すべての画像をスピンします。

または、 Luke Smith のソリューションを試すこともできます。

于 2009-11-25T20:38:14.767 に答える
0 
function myfun(){
  alert("h");
} 

var xlist = [ "source1", "source2", "source3" ];
var xload = 0;
$.each(xlist, function(){
    var srcImg = this;
    $('<img />')
       .attr('src', srcImg)
       .load(function(){
           xload++;
           $('.profile').append( $(this) );
           if (xlist.length==xload){

             // Your other custom code
             myfun();  

           }
       });
});

コメント:ロードされた画像の総量を単に制御することができます。

于 2009-11-25T18:32:02.130 に答える
0

要素の配列を作成する必要があります。

$(img1,img2).load(

する必要があります

$([img1, img2]).load(

$(img1).attr('src', 'source1');できるときにやるのはやり過ぎのようですimg1.src = 'source1';

于 2009-11-25T18:29:45.930 に答える