जावास्क्रिप्ट प्रीलोड छवियाँ

Question

मैं छवियों प्रीलोड करने की कोशिश कर रहा हूँ, निम्नलिखित कोड काम करता है:

$(document).ready(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     var img = new Image(); 
     img.src = "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false"; 
    }); 
}); 

लेकिन मुद्दा मैं का समाधान चाहते हैं, कि क्रोम को प्रदर्शित करता है टैब में कताई "लोड करने" आइकन है। क्या ऐसा कोई तरीका है जिससे मैं ऐसा कर सकता हूं ताकि छवियों को लोड होने तक यह लगातार स्पिन न हो? मैं पेज और थंबनेल लोड करने के लिए चाहता हूं, फिर टैब में कताई आइकन के बिना पृष्ठभूमि में बड़ी छवियों को लोड करना प्रारंभ करें।

Answer 1

कर सकते हैं , और load() घटना, मैं क्या मैं

चाहता था वांछित परिणाम, का प्रत्येक पाश load() घटना के भीतर होने के लिए आवश्यक प्राप्त करने के लिए मिला है। इसे ready() ईवेंट में रखने से छवियों को पृष्ठ छवियों से पहले लोड करना शुरू हो जाता है, जिससे पेज छवियों को कतार में पेंड करना पड़ता है और प्रीलोड किए गए चित्रों के बाद लोड होता है। अधिकांश ब्राउज़र केवल एक ही होस्ट से एक ही मेज से लोड होने की अनुमति देते हैं, दूसरों को एक स्थान तक खुलने तक प्रतीक्षा करनी चाहिए (जब तक कि यह एक अलग मेजबान से न हो)।

$(window).load(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     $.ajax({ url : "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false", cache: true, processData : false }); 
    }); 
}); 

Answer 2

कुछ और छवियों को जोड़ा गया 10 छवियां। वे बिना किसी हलचल और हलचल के लोड करते हैं। मैंने बस अपने इंटरनेट पर कोशिश की जो धीमी कछुआ है।

मुझे लगता है कि ब्राउज़र तब तक प्रतीक्षा करता है जब तक आपके फ़ंक्शन की सभी छवियां पूरी नहीं हो जातीं क्योंकि आपके पास $(document).ready(function() { }); है।

Fiddle

var i = 1; 
$(document).ready(function(){ 
    $(window).stop(); 
    $("img").hide(); 
    $("img").each(function(){ 
     var source = $(this).attr("src"); 
     var img = new Image(); 
     img.className = i; 
     img.src = source; 
     $('body').append(img); 
     $("."+i).hide().fadeIn(); 
     i++; 
    }); 
}); 

Answer 3

अभी तक मेरे विचार का परीक्षण नहीं किया है।

मुझे लगता है कि दस्तावेज़ तैयार होने पर आप छवि फ़ाइलों को सिंक्रनाइज़ कर रहे हैं, इसलिए क्रोम उपयोगकर्ता को बताता है कि लोड नहीं किया गया है।

कताई छवि दिखाने के लिए नहीं है, आप सर्वर से ajax कॉल का उपयोग करना चाहिए छवियों प्राप्त करने के लिए और आप दस्तावेज़ में जोड़ने या bighostkim के जवाब की ajax भाग का उपयोग करते हुए (क्योंकि यह पहले से ही कैश है) कुछ भी नहीं

$.ajax({ url : <<image_url>>, cache: true, processData : false, }) 
.success(function(){ 
    $(document).append($("<img/>").attr("src", <<image_url>>).hide()); 
});