フェード私はランダムにロードされているページ上の一部の画像をしたし、彼らは100kbsの上にあるだけで仕上げロード

Question

後の画像では、それが完全にその後、ロードされ、それをロードし、徐々にそれをフェードインではなく、持ってすることは可能でしょうか？

私のJSは、CSSを使用して隠された画像を

(function($){ 
$.randomImage = { 
    defaults: {   
     //you can change these defaults to your own preferences. 
     path: '_images/', //change this to the path of your images 
     myImages: ['hero_eagle.jpg', 'hero_giraffe.jpg', 'hero_owl.jpg', 'hero_rabbit.jpg'] 
    }   
} 
$.fn.extend({ 
     randomImage:function(config) {    
      var config = $.extend({}, $.randomImage.defaults, config);    
      return this.each(function() {      
        var imageNames = config.myImages;      
        //get size of array, randomize a number from this 
        // use this number as the array index 
        var imageNamesSize = imageNames.length; 
        var lotteryNumber = Math.floor(Math.random()*imageNamesSize); 
        var winnerImage = imageNames[lotteryNumber]; 
        var fullPath = config.path + winnerImage;      

        //put this image into DOM at class of randomImage 
        // alt tag will be image filename. 
        $(this).attr({ src: fullPath });         
      }); 
     }   
}); 

})(jQuery); 

Answer 1

は、ちょうどあなたのスタイルシートにdisplay:noneに画像を設定することができるはずですが、とsrcを設定するスクリプトのビットを次のように変更します。

$(this).attr({ src: fullPath }).load(function() { 
    $(this).fadeIn() 
}); 

Answer 2

スタート...このようになります。次に、使用：

$(document).ready(function() { 
    // Code goes here. 
}); 

フェードインを実行します。

右ここにjQueryを使用して画像をプリロードについて説明し、別のSO質問があります：トップの答えから引用Preloading images with jQuery

：

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
     // Alternatively you could use: 
     // (new Image()).src = this; 
    }); 
} 

// Usage: 

preload([ 
    'img/imageName.jpg', 
    'img/anotherOne.jpg', 
    'img/blahblahblah.jpg' 
]); 

Answer 3

すべての画像をbefoユーザーに読み込みメッセージを表示すると、次のようなメッセージが表示されます。