এটি কীভাবে করবেন তার উত্তরে আমি অনেক প্রকারভেদ দেখেছি, তাই আমি ভেবেছিলাম যে আমি সেগুলি এখানে সংক্ষিপ্ত করব (প্লাস আমার নিজের আবিষ্কারের একটি চতুর্থ পদ্ধতি যুক্ত করব):
(1) ইউআরএলটিতে একটি অনন্য ক্যাশে-বস্টিং কোয়েরি প্যারামিটার যুক্ত করুন, যেমন:
newImage.src = "image.jpg?t=" + new Date().getTime();
পেশাদাররা: 100% নির্ভরযোগ্য, দ্রুত এবং সহজেই বুঝতে এবং প্রয়োগ করতে সক্ষম।
কনস: বাইপাসগুলি পুরোপুরি ক্যাশে হচ্ছে, অর্থ যখনই চিত্রের দর্শনগুলির মধ্যে পরিবর্তন হয় না তখন অপ্রয়োজনীয় বিলম্ব এবং ব্যান্ডউইথ ব্যবহার হয় । সম্ভবত একই চিত্রটির অনেকগুলি, অনেক কপি সহ ব্রাউজারের ক্যাশে (এবং কোনও মধ্যবর্তী ক্যাশে) পূরণ করবে! এছাড়াও, চিত্রের ইউআরএল সংশোধন করা প্রয়োজন।
কখন ব্যবহার করবেন: যখন চিত্রটি অবিচ্ছিন্নভাবে পরিবর্তিত হয় তখন ব্যবহার করুন যেমন লাইভ ওয়েবক্যাম ফিডের জন্য। আপনি যদি এই পদ্ধতিটি ব্যবহার করেন তবে Cache-control: no-cacheএইচটিটিপি শিরোনামের সাথে চিত্রগুলি নিজেরাই পরিবেশন করতে ভুলবেন না !!! (প্রায়শই এটি .htaccess ফাইল ব্যবহার করে সেট আপ করা যেতে পারে)। অন্যথায় আপনি ক্রমবর্ধমানভাবে চিত্রের পুরানো সংস্করণগুলি দিয়ে ক্যাশে পূরণ করবেন!
(২) URL টিতে ক্যোয়ারী প্যারামিটার যুক্ত করুন যা কেবল তখনই ফাইলটি পরিবর্তিত হয়, যেমন:
echo '<img src="image.jpg?m=' . filemtime('image.jpg') . '">';
(এটি পিএইচপি সার্ভার-সাইড কোড, তবে এখানে গুরুত্বপূর্ণ বিষয়টি হ'ল একটি? মি = [ফাইলটি সর্বশেষ সংশোধিত সময়] ক্যোরিস্ট্রিং ফাইলের সাথে সংযুক্ত করা হয়েছে)।
পেশাদাররা: 100% নির্ভরযোগ্য, দ্রুত এবং সহজে বুঝতে এবং বাস্তবায়িত করা সহজ এবং এবং ক্যাশিং সুবিধার পুরোপুরি সংরক্ষণ করে।
কনস: চিত্রের ইউআরএল সংশোধন করা দরকার। এছাড়াও, সার্ভারের জন্য আরও কিছু কাজ করা - এটি সর্বশেষ-সংশোধিত সময়ে ফাইলটিতে অ্যাক্সেস পেতে হবে। এছাড়াও, সার্ভার-সাইডের তথ্য প্রয়োজন, সুতরাং একটি রিফ্রেশ ইমেজ চেক করার জন্য খাঁটি ক্লায়েন্ট-সাইড-সলিউশন সমাধানের জন্য উপযুক্ত নয়।
কখন ব্যবহার করবেন: আপনি যখন ছবিগুলি ক্যাশে করতে চান তবে ফাইলের নাম পরিবর্তন না করেই সময়ে সময়ে এগুলি সার্ভারের শেষে আপডেট করার প্রয়োজন হতে পারে। এবং আপনি যখন সহজেই তা নিশ্চিত করতে পারেন যে আপনার প্রশ্নের এইচটিএমএলে প্রতিটি চিত্রের সাথে সঠিক ক্যোয়ারস্ট্রিং যুক্ত করা হয়েছে।
(3) হেডার সঙ্গে আপনার ইমেজ পরিবেশন Cache-control: max-age=0, must-revalidate, এবং একটি অনন্য যোগ মেমক্যাশে যেমন URL এ -busting টুকরা শনাক্তকারী:
newImage.src = "image.jpg#" + new Date().getTime();
এখানে ধারণাটি হ'ল ক্যাশে-নিয়ন্ত্রণ শিরোলেখ ব্রাউজারের ক্যাশে চিত্রগুলি রাখে, তবে তাত্ক্ষণিকভাবে এগুলিকে বাসি চিহ্নিত করে তোলে এবং যাতে প্রতিটি বার ব্রাউজারটি পুনরায় প্রদর্শিত হয় অবশ্যই সার্ভারের সাথে সেগুলি পরিবর্তন হয়েছে কিনা তা পরীক্ষা করতে হবে। এটি ব্রাউজারের নিশ্চিত করে এইচটিটিপি ক্যাশে সর্বদা চিত্রের সর্বশেষ অনুলিপি প্রদান । তবে, ব্রাউজারগুলি প্রায়শই যদি একটি চিত্র থাকে তবে একটি চিত্রের একটি ইন-মেমরি অনুলিপি পুনরায় ব্যবহার করবে এবং সে ক্ষেত্রে তাদের এইচটিটিপি ক্যাশে চেক করবে না। এটি প্রতিরোধ করতে, একটি খণ্ড সনাক্তকারী ব্যবহার করা হয়: ইন-মেমরি চিত্রের srcতুলনাতে খণ্ড সনাক্তকারীকে অন্তর্ভুক্ত করা হয়, তবে এটি HTTP ক্যাশে জিজ্ঞাসাবাদ করার আগে তা ছিনিয়ে নিয়ে যায়। (সুতরাং, উদাহরণস্বরূপ, image.jpg#Aএবংimage.jpg#B উভয়ই image.jpgব্রাউজারের এইচটিটিপি ক্যাশে প্রবেশ থেকে প্রদর্শিত হতে পারে , তবেimage.jpg#Bশেষ প্রদর্শিত হওয়ার পরে কখনই ইন-মেমরি ধরে রাখা চিত্রের ডেটা ব্যবহার করে প্রদর্শিত হবে না image.jpg#A)।
পেশাদাররা: এইচটিটিপি ক্যাচিং পদ্ধতিগুলির যথাযথ ব্যবহার করে এবং ক্যাশেড চিত্রগুলি পরিবর্তন না করে তবে সেগুলি ব্যবহার করে। স্থবির ইমেজ ইউআরএল-এ যুক্ত হওয়া ক্যোয়ারিং স্ট্রিংয়ের উপরে চাপ দেওয়া সার্ভারগুলির জন্য কাজ করে (যেহেতু সার্ভারগুলি কখনই খণ্ড সনাক্তকারীকে দেখতে পায় না - তারা কেবল ব্রাউজারগুলির নিজস্ব ব্যবহারের জন্য)।
কনস: ব্রাউজারগুলির ইউআরএলগুলিতে টুকরা শনাক্তকারীদের সাথে সম্পর্কিত চিত্রগুলির বিষয়ে কিছুটা সন্দেহজনক (বা কমপক্ষে খারাপভাবে নথিভুক্ত) আচরণের উপর নির্ভর করে (তবে আমি এফএফ 27, ক্রোম 33 এবং আই 11 এ সফলভাবে পরীক্ষা করেছি)। প্রতিটি চিত্র দেখার জন্য সার্ভারের কাছে পুনরায় বৈধকরণের অনুরোধটি প্রেরণ করে, যা চিত্রগুলি খুব কমই পরিবর্তিত হয় এবং / অথবা প্রচ্ছন্নতা একটি বড় সমস্যা হয়ে থাকে (যেহেতু ক্যাশেড চিত্রটি এখনও ভাল থাকলেও আপনাকে পুনরায়করণের প্রতিক্রিয়ার জন্য অপেক্ষা করতে হবে) । চিত্রের URL গুলি সংশোধন করা দরকার।
কখন ব্যবহার করবেন: যখন চিত্রগুলি ঘন ঘন পরিবর্তিত হতে পারে বা সার্ভার-সাইড স্ক্রিপ্টের জড়িততা ছাড়াই ক্লায়েন্টের মধ্যবর্তী সময়ে রিফ্রেশ হওয়া দরকার তবে আপনি যেখানে এখনও ক্যাশে সুবিধা চান তা ব্যবহার করুন। উদাহরণস্বরূপ, একটি লাইভ ওয়েবক্যামের ভোটদান যা প্রতি কয়েক মিনিটে অনিয়মিতভাবে একটি চিত্র আপডেট করে। বিকল্পভাবে, (1) বা (2) এর পরিবর্তে ব্যবহার করুন যদি আপনার সার্ভার স্থিতিশীল চিত্রের URLগুলিতে ক্যোরিস্ট্রিংগুলিকে অনুমতি দেয় না।
(4) বলপূর্বক প্রবেশ জাভাস্ক্রিপ্ট ব্যবহার করে একটি নির্দিষ্ট চিত্র, প্রথম লোডিং এটি দ্বারা রিফ্রেশ একটি লুকানো <iframe>এবং তারপর কলিং location.reload(true)আইফ্রেম এর উপর contentWindow।
পদক্ষেপগুলি হ'ল:
কোনও লুকানো ইফ্রেমে রিফ্রেশ করার জন্য চিত্রটি লোড করুন। এটি কেবল একটি সেটআপ স্টেপ - এটি চাইলে প্রকৃত রিফ্রেশটি অনেক আগেই করা যায়। এই পর্যায়ে ইমেজটি লোড করতে ব্যর্থ হলেও এটি কোনও বিষয় নয়!
এটি হয়ে গেলে, আপনার পৃষ্ঠায় (চিত্রসমূহ) বা যে কোনও ডিওএম নোডের (এমনকি জাভাস্ক্রিপ্টের ভেরিয়েবলগুলিতে সজ্জিত অফ-পৃষ্ঠাসমূহ) image চিত্রটির সমস্ত অনুলিপি ফাঁকা রাখুন। এটি প্রয়োজনীয় কারণ ব্রাউজারটি অন্যথায় কোনও বাসি ইন মেমোরি অনুলিপি থেকে চিত্রটি প্রদর্শন করতে পারে (IE11 বিশেষত এটি করে): আপনাকে এইচটিটিপি ক্যাশে রিফ্রেশ করার আগে মেমরির সমস্ত অনুলিপি সাফ হওয়া নিশ্চিত করতে হবে । যদি অন্যান্য জাভাস্ক্রিপ্ট কোড অ্যাসিঙ্ক্রোনীয়ভাবে চলমান থাকে, ততক্ষণে আপনাকে সেই কোডটি রিফ্রেশ হওয়া ইমেজের নতুন কপি তৈরি করা থেকে বিরত রাখতে হবে।
কল করুন iframe.contentWindow.location.reload(true)। trueবাহিনীর ক্যাশে বাইপাস, সার্ভার থেকে সরাসরি পুনরায় লোড এবং বিদ্যমান ক্যাশে কপি মুছে যাওয়ার।
এটি পুনরায় লোডিং শেষ হয়ে গেলে , খালি ছবিগুলি পুনরুদ্ধার করুন। তাদের এখন সার্ভার থেকে নতুন সংস্করণ প্রদর্শন করা উচিত!
একই ডোমেন চিত্রগুলির জন্য, আপনি ইফ্রেমে সরাসরি চিত্রটি লোড করতে পারেন। ক্রস-ডোমেন চিত্রগুলির জন্য, আপনাকে তার পরিবর্তে আপনার ডোমেন থেকে এমন একটি HTML পৃষ্ঠা লোড করতে হবে যাতে ছবিতে কোনও <img>ট্যাগ থাকে, অন্যথায় আপনি কল করার চেষ্টা করার সময় একটি "অ্যাক্সেস অস্বীকৃত" ত্রুটি পাবেনiframe.contentWindow.reload(...) ।
পেশাদাররা: ঠিক যেমন চিত্রটি পুনরায় লোড করে () ফাংশনটি কাজ করে যা আপনি ইচ্ছা করেন যে ডমটি করতেন! চিত্রগুলিকে সাধারণত ক্যাশে করে মঞ্জুরি দেয় (এমনকি ভবিষ্যতের শেষের তারিখগুলিও যদি আপনি চান তবে এটি ঘন ঘন পুনর্বিবেচনা এড়ানো)। কেবলমাত্র ক্লায়েন্ট-সাইড কোড ব্যবহার না করে বর্তমান পৃষ্ঠায় বা অন্য কোনও পৃষ্ঠায় সেই চিত্রটির URL গুলি পরিবর্তন না করে আপনাকে কোনও নির্দিষ্ট চিত্রকে রিফ্রেশ করার অনুমতি দেয়।
কনস: জাভাস্ক্রিপ্ট উপর নির্ভর করে। প্রতিটি ব্রাউজারে সঠিকভাবে কাজ করার 100% গ্যারান্টিযুক্ত নয় (যদিও এফএফ 27, ক্রোম 33 এবং আই 11 এ আমি এটি সফলভাবে পরীক্ষা করেছি)। অন্যান্য পদ্ধতির তুলনায় খুব জটিল।
কখন ব্যবহার করবেন: যখন আপনার কাছে মূলত স্থিতিশীল চিত্রগুলির একটি সংগ্রহ থাকে যা আপনি ক্যাশে চান, তবে আপনার এখনও মাঝে মধ্যে সেগুলি আপডেট করতে সক্ষম হন এবং আপডেটটি ঘটেছিল তাৎক্ষণিক ভিজ্যুয়াল প্রতিক্রিয়া পান। (বিশেষত যখন পুরো ব্রাউজার পৃষ্ঠাটি সতেজ করা কাজ করবে না, উদাহরণস্বরূপ এজেএক্স-এ নির্মিত কিছু ওয়েব অ্যাপ্লিকেশনগুলিতে)। এবং যখন পদ্ধতিগুলি (1) - (3) ব্যবহারযোগ্য না হয় কারণ (যে কোনও কারণেই) আপনি যে সমস্ত URL টি সম্ভবত আপডেট করতে হবে এমন চিত্রটি প্রদর্শিত করতে পারে না change (নোট করুন যে এই 3 টি পদ্ধতি ব্যবহার করে চিত্রটি রিফ্রেশ হবে, তবে অন্য কোনও পৃষ্ঠা যদি যথাযথ ক্যোরিস্ট্রিং বা খণ্ড সনাক্তকারী ছাড়াই সেই চিত্রটি প্রদর্শন করার চেষ্টা করে তবে পরিবর্তে এটি একটি পুরানো সংস্করণ প্রদর্শন করতে পারে)।
একটি পরী দৃ rob় এবং নমনীয় পদ্ধতিতে এটি বাস্তবায়নের বিবরণ নীচে দেওয়া হল:
ধরে নেওয়া যাক আপনার ওয়েবসাইটটিতে ইউআরএল পাথের ফাঁকা 1x1 পিক্সেল .gif /img/1x1blank.gifরয়েছে এবং এতে নিম্নলিখিত এক-লাইন পিএইচপি স্ক্রিপ্ট রয়েছে (কেবলমাত্র ক্রস-ডোমেন চিত্রগুলিতে জোর করে রিফ্রেশ প্রয়োগের জন্য প্রয়োজনীয় , এবং কোনও সার্ভার-সাইড স্ক্রিপ্টিং ভাষায় আবারও লেখা যেতে পারে) অবশ্যই, ইউআরএল পথে /echoimg.php:
<img src="<?=htmlspecialchars(@$_GET['src'],ENT_COMPAT|ENT_HTML5,'UTF-8')?>">
তারপরে, জাভাস্ক্রিপ্টে আপনি কীভাবে এই সমস্ত কিছু করতে পারেন তার একটি বাস্তব বাস্তবায়ন এখানে। এটি কিছুটা জটিল দেখায়, তবে এখানে অনেকগুলি মন্তব্য রয়েছে এবং গুরুত্বপূর্ণ ফাংশনটি কেবল ফোর্সআইএমগ্রেলোড () - প্রথম দুটি কেবল ফাঁকা এবং আন-ফাঁকা চিত্র, এবং আপনার নিজের HTML এর সাথে দক্ষতার সাথে কাজ করার জন্য ডিজাইন করা উচিত, সুতরাং সেগুলিকে কোড করুন আপনার জন্য সবচেয়ে ভাল কাজ করে; এগুলির মধ্যে বেশিরভাগ জটিলতা আপনার ওয়েবসাইটের জন্য অপ্রয়োজনীয় হতে পারে:
// This function should blank all images that have a matching src, by changing their src property to /img/1x1blank.gif.
// ##### You should code the actual contents of this function according to your page design, and what images there are on them!!! #####
// Optionally it may return an array (or other collection or data structure) of those images affected.
// This can be used by imgReloadRestore() to restore them later, if that's an efficient way of doing it (otherwise, you don't need to return anything).
// NOTE that the src argument here is just passed on from forceImgReload(), and MAY be a relative URI;
// However, be aware that if you're reading the src property of an <img> DOM object, you'll always get back a fully-qualified URI,
// even if the src attribute was a relative one in the original HTML. So watch out if trying to compare the two!
// NOTE that if your page design makes it more efficient to obtain (say) an image id or list of ids (of identical images) *first*, and only then get the image src,
// you can pass this id or list data to forceImgReload() along with (or instead of) a src argument: just add an extra or replacement parameter for this information to
// this function, to imgReloadRestore(), to forceImgReload(), and to the anonymous function returned by forceImgReload() (and make it overwrite the earlier parameter variable from forceImgReload() if truthy), as appropriate.
function imgReloadBlank(src)
{
// ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only!
// ##### For really simple pages containing just a single image that's always the one being refreshed, this function could be as simple as just the one line:
// ##### document.getElementById("myImage").src = "/img/1x1blank.gif";
var blankList = [],
fullSrc = /* Fully qualified (absolute) src - i.e. prepend protocol, server/domain, and path if not present in src */,
imgs, img, i;
for each (/* window accessible from this one, i.e. this window, and child frames/iframes, the parent window, anything opened via window.open(), and anything recursively reachable from there */)
{
// get list of matching images:
imgs = theWindow.document.body.getElementsByTagName("img");
for (i = imgs.length; i--;) if ((img = imgs[i]).src===fullSrc) // could instead use body.querySelectorAll(), to check both tag name and src attribute, which would probably be more efficient, where supported
{
img.src = "/img/1x1blank.gif"; // blank them
blankList.push(img); // optionally, save list of blanked images to make restoring easy later on
}
}
for each (/* img DOM node held only by javascript, for example in any image-caching script */) if (img.src===fullSrc)
{
img.src = "/img/1x1blank.gif"; // do the same as for on-page images!
blankList.push(img);
}
// ##### If necessary, do something here that tells all accessible windows not to create any *new* images with src===fullSrc, until further notice,
// ##### (or perhaps to create them initially blank instead and add them to blankList).
// ##### For example, you might have (say) a global object window.top.blankedSrces as a propery of your topmost window, initially set = {}. Then you could do:
// #####
// ##### var bs = window.top.blankedSrces;
// ##### if (bs.hasOwnProperty(src)) bs[src]++; else bs[src] = 1;
// #####
// ##### And before creating a new image using javascript, you'd first ensure that (blankedSrces.hasOwnProperty(src)) was false...
// ##### Note that incrementing a counter here rather than just setting a flag allows for the possibility that multiple forced-reloads of the same image are underway at once, or are overlapping.
return blankList; // optional - only if using blankList for restoring back the blanked images! This just gets passed in to imgReloadRestore(), it isn't used otherwise.
}
// This function restores all blanked images, that were blanked out by imgReloadBlank(src) for the matching src argument.
// ##### You should code the actual contents of this function according to your page design, and what images there are on them, as well as how/if images are dimensioned, etc!!! #####
function imgReloadRestore(src,blankList,imgDim,loadError);
{
// ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only!
// ##### For really simple pages containing just a single image that's always the one being refreshed, this function could be as simple as just the one line:
// ##### document.getElementById("myImage").src = src;
// ##### if in imgReloadBlank() you did something to tell all accessible windows not to create any *new* images with src===fullSrc until further notice, retract that setting now!
// ##### For example, if you used the global object window.top.blankedSrces as described there, then you could do:
// #####
// ##### var bs = window.top.blankedSrces;
// ##### if (bs.hasOwnProperty(src)&&--bs[src]) return; else delete bs[src]; // return here means don't restore until ALL forced reloads complete.
var i, img, width = imgDim&&imgDim[0], height = imgDim&&imgDim[1];
if (width) width += "px";
if (height) height += "px";
if (loadError) {/* If you want, do something about an image that couldn't load, e.g: src = "/img/brokenImg.jpg"; or alert("Couldn't refresh image from server!"); */}
// If you saved & returned blankList in imgReloadBlank(), you can just use this to restore:
for (i = blankList.length; i--;)
{
(img = blankList[i]).src = src;
if (width) img.style.width = width;
if (height) img.style.height = height;
}
}
// Force an image to be reloaded from the server, bypassing/refreshing the cache.
// due to limitations of the browser API, this actually requires TWO load attempts - an initial load into a hidden iframe, and then a call to iframe.contentWindow.location.reload(true);
// If image is from a different domain (i.e. cross-domain restrictions are in effect, you must set isCrossDomain = true, or the script will crash!
// imgDim is a 2-element array containing the image x and y dimensions, or it may be omitted or null; it can be used to set a new image size at the same time the image is updated, if applicable.
// if "twostage" is true, the first load will occur immediately, and the return value will be a function
// that takes a boolean parameter (true to proceed with the 2nd load (including the blank-and-reload procedure), false to cancel) and an optional updated imgDim.
// This allows you to do the first load early... for example during an upload (to the server) of the image you want to (then) refresh.
function forceImgReload(src, isCrossDomain, imgDim, twostage)
{
var blankList, step = 0, // step: 0 - started initial load, 1 - wait before proceeding (twostage mode only), 2 - started forced reload, 3 - cancelled
iframe = window.document.createElement("iframe"), // Hidden iframe, in which to perform the load+reload.
loadCallback = function(e) // Callback function, called after iframe load+reload completes (or fails).
{ // Will be called TWICE unless twostage-mode process is cancelled. (Once after load, once after reload).
if (!step) // initial load just completed. Note that it doesn't actually matter if this load succeeded or not!
{
if (twostage) step = 1; // wait for twostage-mode proceed or cancel; don't do anything else just yet
else { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); } // initiate forced-reload
}
else if (step===2) // forced re-load is done
{
imgReloadRestore(src,blankList,imgDim,(e||window.event).type==="error"); // last parameter checks whether loadCallback was called from the "load" or the "error" event.
if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
}
}
iframe.style.display = "none";
window.parent.document.body.appendChild(iframe); // NOTE: if this is done AFTER setting src, Firefox MAY fail to fire the load event!
iframe.addEventListener("load",loadCallback,false);
iframe.addEventListener("error",loadCallback,false);
iframe.src = (isCrossDomain ? "/echoimg.php?src="+encodeURIComponent(src) : src); // If src is cross-domain, script will crash unless we embed the image in a same-domain html page (using server-side script)!!!
return (twostage
? function(proceed,dim)
{
if (!twostage) return;
twostage = false;
if (proceed)
{
imgDim = (dim||imgDim); // overwrite imgDim passed in to forceImgReload() - just in case you know the correct img dimensions now, but didn't when forceImgReload() was called.
if (step===1) { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); }
}
else
{
step = 3;
if (iframe.contentWindow.stop) iframe.contentWindow.stop();
if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
}
}
: null);
}
তারপরে, আপনার পৃষ্ঠার মতো একই ডোমেনে অবস্থিত কোনও চিত্রকে রিফ্রেশ করার জন্য, আপনি কেবল এটি করতে পারেন:
forceImgReload("myimage.jpg");
অন্য কোথাও থেকে একটি চিত্র রিফ্রেশ করতে (ক্রস-ডোমেন):
forceImgReload("http://someother.server.com/someimage.jpg", true);
আরও উন্নত অ্যাপ্লিকেশনটি হ'ল আপনার সার্ভারে একটি নতুন সংস্করণ আপলোড করার পরে কোনও চিত্র পুনরায় লোড করা, আপলোডের সাথে একসাথে পুনরায় লোড প্রক্রিয়াটির প্রাথমিক পর্যায়ে প্রস্তুতকারীর কাছে দৃশ্যমান পুনরায় লোড বিলম্বকে হ্রাস করতে পারে। আপনি যদি এজেএক্সের মাধ্যমে আপলোডটি করছেন এবং সার্ভারটি খুব সাধারণ জেএসওন অ্যারে [সাফল্য, প্রস্থ, উচ্চতা] ফিরিয়ে দিচ্ছে তবে আপনার কোডটি এর মতো দেখতে কিছুটা লাগবে:
// fileForm is a reference to the form that has a the <input typ="file"> on it, for uploading.
// serverURL is the url at which the uploaded image will be accessible from, once uploaded.
// The response from uploadImageToServer.php is a JSON array [success, width, height]. (A boolean and two ints).
function uploadAndRefreshCache(fileForm, serverURL)
{
var xhr = new XMLHttpRequest(),
proceedWithImageRefresh = forceImgReload(serverURL, false, null, true);
xhr.addEventListener("load", function(){ var arr = JSON.parse(xhr.responseText); if (!(arr&&arr[0])) { proceedWithImageRefresh(false); doSomethingOnUploadFailure(...); } else { proceedWithImageRefresh(true,[arr[1],ar[2]]); doSomethingOnUploadSuccess(...); }});
xhr.addEventListener("error", function(){ proceedWithImageRefresh(false); doSomethingOnUploadError(...); });
xhr.addEventListener("abort", function(){ proceedWithImageRefresh(false); doSomethingOnUploadAborted(...); });
// add additional event listener(s) to track upload progress for graphical progress bar, etc...
xhr.open("post","uploadImageToServer.php");
xhr.send(new FormData(fileForm));
}
একটি চূড়ান্ত নোট: যদিও এই বিষয়টি চিত্র সম্পর্কিত, এটি সম্ভাব্যভাবে অন্যান্য ধরণের ফাইল বা সংস্থানগুলিতেও প্রযোজ্য। উদাহরণস্বরূপ, বাসি স্ক্রিপ্ট বা সিএসএস ফাইলগুলির ব্যবহার রোধ করা, বা সম্ভবত আপডেট হওয়া পিডিএফ ডকুমেন্টগুলি (ইন-ব্রাউজার খোলার জন্য সেট আপ করা থাকলে কেবল (4) ব্যবহার করে) সতেজ করা। পদ্ধতি (4) এর ক্ষেত্রে উপরের জাভাস্ক্রিপ্টে কিছু পরিবর্তন প্রয়োজন হতে পারে।