धीमी लोडिंग छवियों, अस्थायी छवि को प्रदर्शित करने का सबसे अच्छा तरीका? JQuery शायद?

Question

मैं अपने आवेदन में चार्टिंग डेटा प्रदर्शित करने के लिए Google चार्ट का उपयोग कर रहा हूं। कभी-कभी Google धीमा होता है और चार्ट लोड होने में कुछ समय लगेगा। यह परिदृश्य एक सामान्य पर्याप्त पैटर्न प्रतीत होता है - इसलिए मैं सोच रहा हूं कि अस्थायी छवि दिखाने के लिए एक अच्छा तरीका क्या है, जबकि छवि Google से वितरित की जाती है। मेरे पास jQuery तक पहुंच है - और मैंने कई "प्रीलोडिंग" प्लगइन देखे हैं। क्या मुझे यह चाहिए?

क्या इस परिदृश्य/पैटर्न के लिए सही शब्द वास्तव में "छवि प्रीलोडिंग" कहा जाता है?

मुझे यह जानना अच्छा लगेगा कि लोग इस स्थिति को हल करने के लिए क्या उपयोग करते हैं।

धन्यवाद

Answer 1

छवि लोड होने पर आप http://ajaxload.info/ पर पाए गए उन फैंसी लोडिंग gifs में से एक दिखा सकते हैं। छवि लोड होने के बाद आप लोडिंग gif को छुपाएं और छवि को स्वयं दिखाएं।

ट्यूटोरियल के लिए http://jqueryfordesigners.com/image-loading/ देखें।

Answer 2

छवि प्रीलोड करना आम तौर पर जब आप के अपने अनुरोध किया जा रहा प्रत्याशा में छवियों डाउनलोड लेकिन उन्हें देखने के लिए इससे पहले कि उपयोगकर्ता वास्तव में एक अनुरोध करता है। मेरा मानना ​​है कि वर्तमान सोच यह आमतौर पर ओवरहेड जोड़ती है जब तक कि आपके उपयोगकर्ताओं के बहुत बड़े प्रतिशत को छवि देखने की उम्मीद न हो।

Answer 3

छवियों में onload ईवेंट है जो छवि लोड होने के बाद आग लग जाएगी।

आप उस घटना के लिए सुन सकते हैं, और जब तक यह आग एक और छवि नहीं दिखाती।

<script> 
function showImage() { 
    $("#blah").show(); 
    $("#temp").hide(); 
} 
</script> 

<img id="temp" src="temp_image.png" /> 
<img id="blah" src="blah.png" onload="showImage();" style="display:none;"/> 

Answer 4

नहीं, आप प्रीलोड नहीं करना चाहते हैं (यह माना जाता है कि नामित छवियों के लोड होने पर पेज लोड को रोकना)। आप एक लोडिंग ग्राफिक प्रदर्शित करने की जरूरत है।

$(.loading).css({ 
    'background-image':'myLoading.gif', 
    'background-repeat: 'no-repeat', 
    height: 25, 
    width: 25 
}).load(function(){ 
    $(this.css({ 
    'background-image': null, 
    height: 'auto', 
    width: 'auto' 
    }); 
}); 

या उस प्रभाव ... टिप्पणी ऊंचाई और चौड़ाई के लिए कुछ loaing छवि का आकार होना चाहिए ... जब तक आप छवि आप नीचे खींच के आकार का पता।

Answer 5

प्रीलोडिंग जाने का कोई तरीका नहीं है। यदि आपकी छवि सीधे आपके एप्लिकेशन में दिखाई दे रही है, तो आपका ब्राउज़र इसे जितनी जल्दी हो सके लोड करेगा और जावास्क्रिप्ट का उपयोग करके इसे तेज़ी से लोड नहीं कर पाएगा।

आप इसे धीमा करने के लिए क्या कर सकते हैं।

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

शायद आप दूसरी तरफ कोशिश कर सकते हैं। अपने एप्लिकेशन को डिज़ाइन करें ताकि चार्ट प्रदर्शित होता है जब उपयोगकर्ता कुछ के साथ इंटरैक्ट करता है (बटन, एक लिंक इत्यादि पर क्लिक करें), फिर जब भी उपयोगकर्ता इसके लिए पूछता है तो चार्ट लोड करें।

मुझे मुख्य रूप से निम्न बैंडविड्थ उपयोगकर्ताओं (मोबाइल उपयोगकर्ताओं के लिए) के 2 फायदे दिखाई देते हैं?):

• उपयोगकर्ताओं को, जो चार्ट नहीं करना चाहती अपने लंबे लोडिंग प्रक्रिया से परेशान नहीं किया जाएगा
  • आप बदलते पेज लेआउट की तरह पता है, जबकि छवि
• प्रारंभिक बैंडविड्थ भरी हुई है आपके आवेदन का उपयोग कम हो जाएगा जो इसे अधिक उत्तरदायी
  • आरंभ में लोड करने के लिए कम छवियों को तेज करेगा, ब्राउज़र तेज़ी से तैयार होगा

आइडिया बेशर्म AppleInsider मोबाइल-संस्करण

Answer 6

सहज समाधान लोड (बहुत) बड़ी छवि से चोरी हो। उदाहरण के लिए:

1. थंबनेल 100 x 75, बड़े चित्र हैं आकार 960x720,
2. onClick थंबनेल लोड करने के लिए - हम उस के बाद load('/images/audi_big.jpg') बड़ी छवि,
3. शुरू oryginal छवि $("#big_image img").attr({src: '/images/audi_120px.jpg'}); की जगह है और हम थंबनेल चौड़ाई = "960"।
4. जानकारी LOADING {CSS}z-index: 1 साथ कि वैकल्पिक परत जोड़ने पर,
5. अगर बड़ी छवि भरी हुई यह कार्य करें: $("#big_image img").attr({src: '/images/audi_big.jpg'});