سؤال

لدي بعض الصور على الصفحة التي يتم تحميلها بشكل عشوائي ويبلغ حجمها أكثر من 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);
هل كانت مفيدة؟

المحلول

يجب أن تكون قادرًا على ذلك، فقط اضبط الصورة على display:none في ورقة الأنماط الخاصة بك وقم بتعديل جزء البرنامج النصي الذي يضبط src على هذا:

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

نصائح أخرى

ابدأ بالصور المخفية باستخدام CSS.ثم استخدم:

giveacodicetagpre.

ولديك التنفيذ في التنفيذ هناك.

هناك سؤال آخر حتى يناقش صور التحميل المسبق باستخدام jQuery هنا: الصور المسطرة مع jQuery

اقتباس من الأعلى إجابة:

giveacodicetagpre.

إذا كنت تريد تحميل جميع الصور من التحميل مسبقا قبل التبول، وعرض رسالة تحميل للمستخدم، يمكنك استخدام شيء مثل هذا:

giveacodicetagpre.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top