2

誰かがrandom.phpページから画像をプリロードして、最初にロードしたときにフェードインする方法を理解するのを手伝ってもらえますか？現在、プリロードされていないため、醜いバルクエコーが発生しますが、ページが実行されると、次々に完全にフェードオンします...

//Loop through the images and print them to the page
for (var i=0; i < totalBoxes; i++){
  $.ajax({
    url: "random.php?no=",
    cache: false,
    success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
        var largePath = $(this).attr("rel");
        $(this).fadeOut("slow", function() {
          $(this).attr({ src: largePath }).fadeIn("slow");
        });
      });
    }
  });
}
4

2 に答える 2

3

先日、画像のURLの配列を取得してプリロードするクイックプラグインを作成しました。各画像の読み込み後、および/またはすべての画像の読み込みが完了した後の処理を指定できます。

jQuery.extend(jQuery, {
    imagesToLoad: 0,
    loadedImages: [],
    preloadImages: function(){
        var settings = {
            urls : [],
            begin : function(){},
            each : function(){},
            complete : function(){},
            scope: window
        };
        jQuery.extend(settings, arguments[0]);
        var images = [];

        jQuery.imagesToLoad = settings.urls.length;

        settings.begin.call(settings.scope, settings.urls);
        for(var i = 0; i < settings.urls.length; i++){
            images[i] = new Image();
            images[i].onload = function(){
                settings.each.call(settings.scope,this);
                jQuery.loadedImages.push(this);
                if(jQuery.loadedImages.length >= jQuery.imagesToLoad){
                    settings.complete.call(settings.scope,jQuery.loadedImages);
                }
            }
            images[i].src= settings.urls[i];
        }
    }
});

次に、次のようにしてコードでこれを使用できます。

$.preloadImages({
    urls: ['path/to/image/1.jpg', 'path/to/image/2.jpg'],
    begin: function(urls){
        console.log("loading images %o", urls);
    },
    each: function(image){
        console.log("finished loading %s", image.src);
    },
    complete: function(images){
        // do whatever after all the images are done loading
    }
});
于 2009-11-04T17:51:37.650 に答える
0

私が好きなトリックは次のとおりです。random.phpの前のページで、ページの下部imgに、 random.phpでフェードインする画像を参照するタグを追加します。imgタグに単純なCSSクラスを追加しますdisplay: none。これにより、ユーザーのブラウザキャッシュが画像でプライミングされ、random.phpにアクセスしたときに画像がすでにダウンロードされ、フェードが期待どおりに機能するようになります。もちろん、これはrandom.phpがサイトのランディングページでない場合にのみ機能します。もう1つの要因は、話している画像の数とそのサイズです。

于 2009-11-04T17:27:04.623 に答える