Исчезать в изображении только после окончания загрузки - PullRequest
Новая
       28

Исчезать в изображении только после окончания загрузки

1 голос
/ 15 марта 2012

У меня есть несколько изображений на странице, которые загружаются случайным образом, и их размер превышает 100 КБ. Можно ли загрузить их полностью, затем затемнить, а не постепенно загружать?

Мой 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);

Ответы [ 3 ]

3 голосов
/ 15 марта 2012

Должно быть в состоянии, просто установите изображение на display:none в вашей таблице стилей и измените бит скрипта, который устанавливает src следующим образом: 

$(this).attr( { src: fullPath }).load(function() {
  $(this).fadeIn()
});
2 голосов
/ 15 марта 2012

Начните с изображений, скрытых с помощью CSS. Тогда используйте: 

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

и сделайте там постепенное появление.

Еще один вопрос SO, в котором обсуждается предварительная загрузка изображений с помощью jQuery: Предварительная загрузка изображений с помощью 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'
]);
0 голосов
/ 15 марта 2012

, если вы хотите, чтобы все изображения были предварительно загружены, а затем отображать сообщение о загрузке пользователю, вы можете использовать что-то вроде этого: 

                var gotime = imgArray.length;
                $(".maxCount").text(gotime);

                var imgCounter = 0;
                $.each(imgArray, function(){
                    $(new Image()).load(function(){
                        imgCounter++;
                        $(".presentCount").text(imgCounter);

                        if (--gotime < 1) {
                            $("#content").fadeIn();
                        }
                    }).attr('src', this);
                });
...