javascript - 仅在完成加载后淡入图像

Question

我在页面上随机加载了一些图像，它们超过 100kbs，是否可以将其完全加载然后淡入而不是逐步加载？

我的 JS 看起来像这样......

(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()
});