jQuery बदल रहा है <img> $ (selector) .prop के साथ src लंबे समय लगता है

Question

इसलिए इस कोड कार्यक्षमता के साथ कोई समस्या नहीं है। मेरे पास ऐसा कुछ है:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 

मेरे पास मेरे कोड का एक और हिस्सा है, जो jQuery के साथ छवि src/text को बदलता है।

function changeImage() { 
    $('#imageToChange').prop('src', '/path/image2.png'); 
    $('#textToChange').html('New Text'); 
} 

जैसा कि आप उम्मीद कर सकते हैं, यह ठीक उसी तरह काम करता है जैसा मैं उम्मीद करता हूं। लेकिन 1 क्विर्क के साथ।

सभी मुख्य ब्राउज़रों (क्रोम/एफएफ/आईई) में। छवि बदलने के लिए एक लंबा समय लगता है।

तो उदाहरण के लिए, जब मैं चेंज इमेज() को कॉल करता हूं, तो पाठ तुरंत बदल जाएगा, लेकिन छवि 1-2 सेकंड बाद तक बदल नहीं सकती है। (किसी भी खिंचाव, लगभग ~ 6 केबी, और स्थानीय) द्वारा बड़ी छवियां नहीं

मुझे किसी और को वास्तव में इसके बारे में शिकायत नहीं मिली है, लेकिन मैं क्या सोच रहा हूं कि छवि बदलने के लिए कोई रास्ता है src? शायद यह करने का एक बेहतर तरीका है?

यह jquery 1.8.0 भी है।

धन्यवाद

Answer 1

मैंने पहले इस व्यवहार को देखा है संचित किया जाएगा का उपयोग करने के

<img src="path/to/image.jpg" style="display: none" /> 

जोड़ें। देरी छवि को कैश नहीं किया जा रहा है और बाद के लोड समय के कारण होता है। एकमात्र समाधान जो मुझे पता है:

1. जावास्क्रिप्ट छवि ऑब्जेक्ट्स के साथ अपनी छवियों को प्रीलोड करें।
2. छवि पर load event को संभालें और छवि के लोड होने के बाद टेक्स्ट को अपडेट करें। नोट jQuery कुछ मुद्दों को सूचीबद्ध करता है के लिए बाहर देखने के लिए:
लोड घटना के

चेतावनियां जब छवियों के साथ इस्तेमाल किया

एक आम चुनौती डेवलपर्स .load() का उपयोग कर शॉर्टकट एक निष्पादित करने के लिए है का समाधान करने का प्रयास एक छवि (या छवियों का संग्रह) पूरी तरह से लोड हो गया है जब समारोह। के साथ कई ज्ञात चेतावनी हैं जिन्हें ध्यान दिया जाना चाहिए। ये हैं:

• यह लगातार है और न ही मज़बूती से काम नहीं करता है पार ब्राउज़र
• यह WebKit में सही ढंग से आग नहीं करता है छवि src के रूप में पहले
• यह नहीं है एक ही स्रोत पर सेट है सही ढंग से बबल सामने डोम पेड़
• सकते हैं छवियों कि पहले से ही ब्राउज़र की कैश में रहते हैं के लिए आग संघर्ष

http://api.jquery.com/load-event/

Answer 2

यह आपकी छवियों का लोड समय होने की संभावना है। यदि यह मामला है, तो पहली बार छवि लोड करना केवल धीमा होना चाहिए। एक फॉलो अप लोड, छवि को किसी और चीज़ में बदलने के बाद, तेज़ होगा।

$('#imageToChange').prop('src', '/path/image1.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image2.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image1.png'); 
//fast, it already has this image 

एक समाधान के रूप में, आप अपनी छवियों को प्रीलोड करने का प्रयास कर सकते हैं। या, बेहतर अभी तक, css sprites का उपयोग करें।

Answer 3

जब आप छवि के स्रोत को बदलते हैं तो आप एक और छवि फ़ाइल प्राप्त करते हैं। यह नई छवि के लिए एक HTTP अनुरोध करता है, इसलिए इसे दिखाने से पहले इसे लोड करने की आवश्यकता है। क्या यह हो सकता है?

बीटीडब्ल्यू, इस कारण से आप जेएस के साथ छवि को प्री-लोड कर सकते हैं। या तो अपने HTML या जे एस

var im = new Image(1,1); 
im.src = "path/to/image.jpg"; 

इस तरह से छवि

Answer 4

यह नेटवर्क की देरी है। इसे आज़माएं:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 
<img src='/path/image2.png' style='display:none'> 

Answer 5

आप जावास्क्रिप्ट छवि ऑब्जेक्ट का उपयोग करके छवि को प्री-लोड कर सकते हैं।

अपने दस्तावेज़ के शीर्ष में

<script type="text/javascript"> 
    img2 = new Image(); 
    img2.src = "/path/image2.png"; 
</script> 

Answer 6

आप विशेषता jQuery .attr फ़ंक्शन का उपयोग फेरबदल करके देख सकते हैं डाल दिया। अगर मुझे सही ढंग से याद किया जाता है तो src किसी छवि का टैग एक विशेषता नहीं है। हालांकि .prop और .attr दोनों अपेक्षाकृत समान कार्य करते हैं, ब्राउज़र के बीच लगातार व्यवहार सुनिश्चित करने के लिए आप .attr टैग का उपयोग करना चाह सकते हैं।

$('#imageToChange').attr('src', '/path/image2.png'); 

जहां तक ​​देरी हो जाती है, यह छवि के आकार के कारण हो सकती है। ब्राउज़र को छवि के लिए सर्वर को एक GET अनुरोध करना है और उसके बाद DOM को पेंट करना है। यदि छवि बड़ी है, तो कोड के स्रोत को बदलने पर और जब नई छवि को DOM पर ठीक से लिखा जाता है, तो यह समय विलंब हो सकता है। यदि छवि बड़ी है, तो आप इसे वेब स्केल करने के लिए इसे स्केलिंग या ऑप्टिमाइज़ करने पर विचार करना चाहेंगे।

उम्मीद है कि इससे मदद मिलती है।