छवि आईफ़्रेम

Question

में लोड होने के बाद कैश से लोड नहीं हो रही है, मैं एक आईफ्रेम में एक छवि लोड कर रहा हूं और फिर (अगर आईफ़्रेम लोड हो जाता है) पृष्ठ पर छवि लोड कर रहा है। लेकिन अधिकांश ब्राउज़र छवि को दो बार लोड कर रहे हैं। कैश से लोड होने वाले img टैग क्यों नहीं है?

कुछ इस तरह:

var loader = $('<iframe />').appendTo('body')[0]; 
loader.onload = function() { 
    $('body').append('<img src="' + imgsrc + '" />'); 
}; 
loader.src = imgsrc; 

http://jsfiddle.net/amirshim/na3UA/

मैं fiddler2 उपयोग कर रहा हूँ नेटवर्क यातायात को देखने के लिए।

मामले में आप को पता है क्यों मैं ऐसा करना चाहते हैं चाहते हैं, this question

Answer 1

की जाँच करने के बाद एक iframe एक अलग टैब होने की तरह है, यह एक और ब्राउज़र उदाहरण का उपयोग करता है, इस कारण के लिए मेरा मानना ​​है कि इसे का उपयोग नहीं कर रहा है कैश।

फिर भी अगर आप क्या चाहते हैं चित्र पूर्व लोड चल रहा है, आप जावास्क्रिप्ट

Answer 2

में new Image() उपयोग कर सकते हैं हो सकता है कि आप HTTP हेडर, जो कैशिंग को रोकने भेजने? यदि आप उपयोगकर्ता को छवि भेजने और सत्र शुरू करने के लिए PHP का उपयोग करते हैं, तो PHP हर समय छवि को फिर से लोड करने के लिए शीर्षलेख सेट करेगा।

Answer 3

। Htaccess का उपयोग कैशिंग को बेहतर बनाने के लिए किया जा सकता है और आप PHP में हेडर सेट भी कर सकते हैं। मैं .htaccess का उपयोग करता हूं: यदि छवि एक बार लोड हो गई है और आपने कोई बदलाव नहीं किया है, तो इसे कैश से लोड किया जाएगा। यह व्यवहार अन्य प्रकार की फ़ाइलें के लिए सेट किया जा सकता (देखें नीचे):

.htaccess

# BEGIN Expire headers 
<IfModule mod_expires.c> 
    ExpiresActive On 
    ExpiresDefault "access plus 1 seconds" 
    ExpiresByType image/x-icon "access plus 2 months" 
    ExpiresByType image/jpeg "access plus 2 months" 
    ExpiresByType image/png "access plus 2 months" 
    ExpiresByType image/gif "access plus 2 months" 
    ExpiresByType application/x-shockwave-flash "access plus 2 months" 
    ExpiresByType text/css A15552000 
    ExpiresByType text/javascript "access plus 2 months" 
    ExpiresByType application/x-javascript "access plus 2 months" 
    ExpiresByType text/html "access plus 600 seconds" 
    ExpiresByType application/xhtml+xml "access plus 600 seconds" 
</IfModule> 
# END Expire headers 
# BEGIN Cache-Control Headers 
<IfModule mod_headers.c> 
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf)$"> 
    Header set Cache-Control "max-age=15552000, public" 
</FilesMatch> 
<FilesMatch "\\.(css)$"> 
    Header set Cache-Control "max-age=2678400, public" 
</FilesMatch> 
<FilesMatch "\\.(js)$"> 
    Header set Cache-Control "max-age=2678400, private" 
</FilesMatch> 
<FilesMatch "\\.(x?html?|php)$"> 
    Header set Cache-Control "max-age=600, private, must-revalidate" 
</FilesMatch> 

Answer 4

मैं इस नए संस्करण के साथ परीक्षण किया है और यह काम करता है, कैशिंग के लिए प्रयोग किया जाता है दूसरी छवि, आईई 7 & एफएफ 3.6 पर परीक्षण किया गया। अंतर मैं जिस तरह से लोड() jQuery कॉलबैक में img src विशेषता सेट करता हूं (लेकिन मेरे लिए एक रहस्य क्यों बना रहता है)।

इस उदाहरण में सावधान रहें, मैंने वास्तव में अंतर देखने के लिए विशाल छवि का उपयोग किया।

$(function() { 
    var use_unique_name = true; 

    var imgsrc = 'http://www.challey.com/WTC/wtc_huge.jpg'; 
    if (use_unique_name) { 
     var ts = +(new Date()); 
     // try replacing _= if it is there 
     var ret = imgsrc.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2"); 
     // if nothing was replaced, add timestamp to the end 
     imgsrc = imgsrc + ((ret == imgsrc) ? (imgsrc.match(/\?/) ? "&" : "?") + "_=" + ts : ""); 
    } 

    var loader = $('<iframe />').appendTo('body'); 

    loader.load(function() { 
     var img = jQuery('<img src="#"/>'); 
     $('body').append(img); 
     img.attr('src',imgsrc); 
    }); 

    loader.attr('src', imgsrc); 
}); 

संपादित बेला लिंक:। http://jsfiddle.net/regilero/g8Hfw/