কীভাবে কোনও ওয়েব ব্রাউজারকে চিত্রগুলি ক্যাশে করতে বাধ্য করবেন না

Question

পটভূমি

আমি দুটি প্রো-বোনো ওয়েবসাইটের জন্য খুব সাধারণ সিজিআই-ভিত্তিক (পার্ল) সামগ্রী পরিচালনা সরঞ্জামটি লিখছি এবং ব্যবহার করছি। এটি ওয়েবসাইট প্রশাসককে ইভেন্টের জন্য এইচটিএমএল ফর্ম সরবরাহ করে যেখানে তারা ক্ষেত্রগুলি (তারিখ, স্থান, শিরোনাম, বিবরণ, লিঙ্কগুলি ইত্যাদি) পূরণ করে এবং এটি সংরক্ষণ করে। সেই ফর্মটিতে আমি প্রশাসকটিকে ইভেন্ট সম্পর্কিত কোনও চিত্র আপলোড করার অনুমতি দেব। এইচটিএমএল পৃষ্ঠায় ফর্মটি প্রদর্শিত হচ্ছে, আমি আপলোড করা ছবির পূর্বরূপও দেখছি (এইচটিএমএল ইমগ ট্যাগ)।

সমস্যাটি

প্রশাসক যখন চিত্র পরিবর্তন করতে চান তখন সমস্যাটি ঘটে। তাকে কেবল "ব্রাউজ" বোতামটি চাপতে হবে, একটি নতুন ছবি বাছতে হবে এবং ঠিক আছে চাপুন। এবং এটি সূক্ষ্ম কাজ করে।

ছবিটি আপলোড হয়ে গেলে আমার ব্যাক-এন্ড সিজিআই আপলোডটি পরিচালনা করে এবং ফর্মটি সঠিকভাবে পুনরায় লোড করে।

সমস্যাটি হ'ল দেখানো চিত্রটি সতেজ হয় না । ডাটাবেসটি সঠিক চিত্র ধারণ করেও পুরানো চিত্রটি এখনও প্রদর্শিত হচ্ছে। আমি এটিকে সংকুচিত করে দিয়েছি যে ওয়েব ব্রাউজারে চিত্রটি ধরা পড়েছে। যদি প্রশাসক ফায়ারফক্স / এক্সপ্লোরার / সাফারিতে রিলড বোতামটি হিট করে তবে সবকিছু সতেজ হয়ে যায় এবং নতুন চিত্রটি ঠিক উপস্থিত হয়।

আমার সমাধান - কাজ করছে না

আমি অতীতের খুব বেশি তারিখের সাথে এইচটিটিপি মেয়াদোত্তীর্ণ নির্দেশ লিখে ক্যাশে নিয়ন্ত্রণ করার চেষ্টা করছি।

Expires: Mon, 15 Sep 2003 1:00:00 GMT

মনে রাখবেন যে আমি প্রশাসনিক পক্ষেই আছি এবং পৃষ্ঠাগুলি লোড হতে একটু বেশি সময় নেয় কিনা তা সত্যই আমি পাত্তাই দিই না কারণ সেগুলি সর্বদা মেয়াদোত্তীর্ণ হয়ে যায়।

তবে, এটিও কাজ করে না।

মন্তব্য

কোনও ছবি আপলোড করার সময়, এর ফাইল নামটি ডাটাবেসে রাখা হয় না। এর নামকরণ করা হয়েছে Image.jpg (এটি ব্যবহার করার সময় কেবল জিনিসগুলি আউট করার জন্য)। নতুন চিত্রের সাথে বিদ্যমান চিত্রটি প্রতিস্থাপন করার সময় নামটি আর বদলায় না। শুধু চিত্র ফাইলের সামগ্রী পরিবর্তন হয়।

ওয়েবসভারটি হোস্টিং পরিষেবা / আইএসপি সরবরাহ করে। এটি অ্যাপাচি ব্যবহার করে।

প্রশ্ন

ওয়েব ব্রাউজারকে এই পৃষ্ঠা থেকে জিনিসগুলি এমনকি ক্যাশে না করার জন্য বাধ্য করার কোনও উপায় আছে কি না?

আমি ডাটাবেসের সাহায্যে "ফাইলের নাম সংরক্ষণ করুন" বিকল্পটি নিয়ে জাগ্রত করছি। এইভাবে, চিত্রটি পরিবর্তন করা হলে, আইএমজি ট্যাগের এসআরসিও পরিবর্তন হবে। যাইহোক, এর জন্য পুরো সাইটের জুড়ে প্রচুর পরিবর্তন প্রয়োজন এবং আমার আরও ভাল সমাধান পেলে আমি এটি না করি। এছাড়াও, আপলোড করা নতুন চিত্রটির একই নাম থাকলে (চিত্রটি কিছুটা ফটোশপ করে পুনরায় আপলোড করা হয়েছে) এটি এখনও কাজ করবে না।

Comments

আমি মনে করি এই প্রশ্নটি লেখার সময় কিছুক্ষণ আগে আমি সেখানে রেখেছি "এখন অব্যর্থ প্রসঙ্গ" সমস্ত অপসারণের জন্য পুনরায় কাজ করা যেতে পারে। আমি মনে করি শিরোনামটি সঠিক, এবং শীর্ষের উত্তরটিও। তবে প্রশ্নটি মূলত বিভিন্ন ধরণের উত্তরের জন্য প্রচুর জায়গা সরবরাহ করার জন্য লেখা হয়েছিল এবং এরকম সহজ সমাধান আশা করা যায়নি। সুতরাং প্রশ্নটি উত্তর পেতে লোকেরা সেখানে আসার জন্য কিছুটা বিশৃঙ্খলাবদ্ধ।

— ফিলিবার্ট পেরুস

Answer 1

আরমিন রোনাকারের সঠিক ধারণা আছে। সমস্যাটি এলোমেলো স্ট্রিংগুলির সংঘর্ষ হতে পারে। আমি ব্যবহার করব:

<img src="picture.jpg?1222259157.415" alt="">

যেখানে "1222259157.415" সার্ভারে বর্তমান সময়।
জাভাস্ক্রিপ্ট performance.now()দ্বারা বা পাইথনের সাথে সময় উত্পন্ন করুনtime.time()

Comments

একটি গুরুত্বপূর্ণ সংযোজন হ'ল আপনি কোনও ব্রাউজারকে কখনই কিছু করতে বাধ্য করতে পারবেন না । আপনি যা করতে পারেন তা হ'ল বন্ধুত্বপূর্ণ পরামর্শ দেওয়া। ব্রাউজার এবং ব্যবহারকারীর উপর নির্ভর করে আসলে সেই পরামর্শগুলি অনুসরণ করা উচিত follow একটি ব্রাউজার এটিকে অবহেলা করতে পারে, বা কোনও ব্যবহারকারী ডিফল্টগুলিকে ওভাররাইড করতে পারে।

— জোয়েল কোহর্ন

জোয়েল, আপনি আপনার নিজের উত্তরে এটি যোগ করা ভাল ছিল।

— epochwolf

এখানে একটি পার্টিতে আসতে কেবল একটি চিন্তাভাবনা এবং অনেক দেরি - তবে যেহেতু আপনার চিত্র পরিবর্তন করার নিয়ন্ত্রণ রয়েছে তাই সম্ভবত ক্যোরি স্ট্রিং যুক্ত না করে চিত্রটির নতুন নামকরণ করা ভাল would সুতরাং: 1222259157.jpg উদাহরণস্বরূপ, ছবি.jpg এর পরিবর্তে? 1222259157। এইভাবে এটি আপডেট করা হয়েছে এবং পুনর্বিবেচনার পরে পুনরায় ক্যাশে করা হয়েছে।

— ডানজাহ

সার্ভারের সময় যুক্ত করার পরিবর্তে, যা সম্পূর্ণরূপে ক্যাশে প্রতিরোধ করবে, কেন '?' এর পরে ফাইলটির শেষ-সংশোধিত সময় যুক্ত করবেন না? এইভাবে, চিত্রটি পরবর্তী পরিবর্তন না হওয়া পর্যন্ত স্বাভাবিকভাবে ক্যাশে করা হবে।

— ডিন

দোইনের শেষ মন্তব্যটি উড়িয়ে দিতে হবে! স্মার্ট ক্যাশিংটি সত্যই গুরুত্বপূর্ণ, কেন কাউকে একই ফাইলটি বারবার ডাউনলোড করতে হবে?

— f.carese

Answer 2

সাধারণ ফিক্স: চিত্রটিতে একটি এলোমেলো ক্যোয়ারী স্ট্রিং সংযুক্ত করুন:

<img src="foo.cgi?random=323527528432525.24234" alt="">

এইচটিটিপি আরএফসি কী বলে:

Cache-Control: no-cache

কিন্তু এটি খুব ভাল কাজ করে না :)

Comments

ক্যাশে-নিয়ন্ত্রণ কীভাবে দেবেন: সাধারণ এইচটিএমএল <img> ট্যাগে কোনও ক্যাশ নেই?

— পি সতীশ প্যাট্রো

এটি প্রতিক্রিয়া শিরোনাম আসা প্রয়োজন?

— পি সতীশ প্যাট্রো

Answer 3

আমি পিএইচপি এর ফাইল সংশোধিত সময় ফাংশন ব্যবহার করি , উদাহরণস্বরূপ:

echo <img  src='Images/image.png?" . filemtime('Images/image.png') . "'  />";

আপনি যদি চিত্রটি পরিবর্তন করেন তবে নতুন পরিবর্তিত টাইমস্ট্যাম্প থাকার কারণে নতুন চিত্রটি ক্যাশেডের পরিবর্তে ব্যবহৃত হবে।

Comments

দুর্দান্ত টিপ। আপনার পরিবর্তিত সময় পরিবর্তিত হলে (ওভাররাইট করা বা পরিবর্তিত) ক্লায়েন্টকে আপনার ক্যাচিং এবং চিত্র উভয়ই আবার পাঠানো হয়েছে।

— ভাসিলিস লরদাস

এখানে অন্য কোনো বিকল্প দেখতে stackoverflow.com/questions/56588850/...

— drooh

একেবারে পেরেক দিয়েছিল। দুর্দান্ত টিপ সাথী।

— খুররাম শায়খ

পারফেক্ট! মাত্র একটি অতিরিক্ত টিপ: <img src = "চিত্র / চিত্র.png? <? পিএইচপি প্রতিধ্বনি ফাইলমাইম ('চিত্র / চিত্র.jpg')?>">

— রিকা

Answer 4

আমি ব্যবহার করব:

<img src="picture.jpg?20130910043254">

যেখানে "20130910043254" ফাইলটির পরিবর্তনের সময়।

কোনও ছবি আপলোড করার সময়, এর ফাইল নামটি ডাটাবেসে রাখা হয় না। এর নামকরণ করা হয়েছে Image.jpg (এটি ব্যবহার করার সময় কেবল জিনিসগুলি আউট করার জন্য)। নতুন চিত্রের সাথে বিদ্যমান চিত্রটি প্রতিস্থাপন করার সময় নামটি আর বদলে যায় না। শুধু চিত্র ফাইলের সামগ্রী পরিবর্তন হয়।

আমি মনে করি এখানে দুটি ধরণের সহজ সমাধান রয়েছে: 1) যেগুলি প্রথমে মনে আসে (সরল সমাধান, কারণ তারা সহজেই সামনে আসে), ২) আপনি যেগুলি শেষ করে জিনিসগুলি চিন্তা করার পরে শেষ করেন (কারণ তারা সহজেই সহজ) ব্যবহার)। স্পষ্টতই, আপনি যদি সব কিছু নিয়ে ভাবতে চান তবে আপনি সর্বদা উপকৃত হবেন না। তবে দ্বিতীয় বিকল্পগুলি বরং অবমূল্যায়নযুক্ত, আমি বিশ্বাস করি। ভেবে দেখুন কেন phpএত জনপ্রিয়;)

Comments

+1 আমি মনে করি এটি অন্যান্য উত্তরগুলির তুলনায় অনেক ভাল ধারণা কারণ লাস পরিবর্তনের সময়টি ব্যবহার করে, যখন আপনার চিত্রটিতে কোনও পরিবর্তন হয়নি তখন আপনার সার্ভার একই ব্রাউজারে একই চিত্রটি একাধিকবার দেওয়ার চেষ্টা করবে না। প্রতিবার অনুরোধ থাকলে প্রতিবারের চিত্রের শেষ লেখার সময় বের করার জন্য একটি সামান্য ওভারহেড থাকে তবে একটি বৃহত চিত্রের জন্য প্রতিবার চিত্রটি ফেরত দেওয়া ভাল এবং যখন চিত্র পরিবর্তন হয়, ব্যবহারকারীটির কাছে নতুনটি থাকে। এই সুন্দর সামান্য সংযোজনের জন্য আপনাকে ধন্যবাদ।

— স্যামুয়েল

ঠিক আছে, কেউ ডাটাবেসে চিত্রের পাথের সাথে সংশোধন সময় সঞ্চয় করতে পারে। সুতরাং ওভারহেড আরও কম তাৎপর্যপূর্ণ হতে পারে। অন্যদিকে, যদি এগুলি এমন চিত্রগুলি হয় যা আমরা উত্স কোডের অংশ হিসাবে কথা বলছি তবে কেউ তাদের পরিবর্তনের সময়ও ক্যাশে রাখতে পারে। চিত্রগুলির পরিবর্তনের সময় সহ একটি স্ক্রিপ্ট তৈরি করে (উদাঃ images.php)। এই স্ক্রিপ্টটি অবশ্যই প্রতিটি প্রতিশ্রুতি পুনর্গঠন করতে হবে এবং ফাইলগুলির পরিবর্তনের সময় নির্ধারণের ওভারহেডকে সরিয়ে ফেলতে হবে।

— এক্স-ইয়ুরি

@ এক্স-Yori কেন আমি বরং filemtime চলমান চেয়ে ডাটাবেসের মধ্যে এই আপডেট ক্ষেত্র সঞ্চয় করতে অনির্বাচন করছি stackoverflow.com/questions/56588850/...

— drooh

Answer 5

শ্রেণি ব্যবহার করুন = "নন-ক্যাচ"

নমুনা এইচটিএমএল:

<div>
    <img class="NO-CACHE" src="images/img1.jpg" />
    <img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>

JQuery:

    $(document).ready(function ()
    {           
        $('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() });
    });

জাভাস্ক্রিপ্ট:

var nods = document.getElementsByClassName('NO-CACHE');
for (var i = 0; i < nods.length; i++)
{
    nods[i].attributes['src'].value += "?a=" + Math.random();
}

ফলাফল: src = "চিত্র / img1.jpg" => src = "চিত্র / img1.jpg? A = 0.08749723793963926"

Comments

সহজ, মার্জিত, এবং সার্ভার সাইড রেন্ডারিংয়ের প্রয়োজন হয় না। চমৎকার!

— আহি টুনা

Answer 6

আপনি ইমেজ পরিবেশন করার জন্য একটি প্রক্সি স্ক্রিপ্ট লিখতে পারেন - এটি যদিও কিছুটা বেশি কাজ। কিছু এটি পছন্দ করে:

এইচটিএমএল:

<img src="image.php?img=imageFile.jpg&some-random-number-262376" />

লিপি:

// PHP
if( isset( $_GET['img'] ) && is_file( IMG_PATH . $_GET['img'] ) ) {

  // read contents
  $f = open( IMG_PATH . $_GET['img'] );
  $img = $f.read();
  $f.close();

  // no-cache headers - complete set
  // these copied from [php.net/header][1], tested myself - works
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
  header("Cache-Control: no-store, no-cache, must-revalidate"); 
  header("Cache-Control: post-check=0, pre-check=0", false); 
  header("Pragma: no-cache"); 

  // image related headers
  header('Accept-Ranges: bytes');
  header('Content-Length: '.strlen( $img )); // How many bytes we're going to send
  header('Content-Type: image/jpeg'); // or image/png etc

  // actual image
  echo $img;
  exit();
}

আসলে নো-ক্যাশে শিরোনাম বা ইমেজ এসসিআর এ এলোমেলো সংখ্যা যথেষ্ট হওয়া উচিত, তবে যেহেতু আমরা বুলেট প্রুফ হতে চাই ..

Comments

ইতিমধ্যে প্রাগমা কোনও প্রতিক্রিয়া শিরোনাম নয় You

— পিসকভোর

@ পিসকোভার: w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.32 অন্যথায় বলে মনে হচ্ছে।

— গ্রিজলি

Answer 7

আমি একটি নতুন কোডার, তবে ব্রাউজারটিকে ক্যাচিং করা এবং আমার ওয়েব ক্যামের ধারণাগুলি ধরে রাখা থেকে বিরত রাখতে আমি এখানে কী নিয়ে এসেছি:

<meta Http-Equiv="Cache" content="no-cache">
<meta Http-Equiv="Pragma-Control" content="no-cache">
<meta Http-Equiv="Cache-directive" Content="no-cache">
<meta Http-Equiv="Pragma-directive" Content="no-cache">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

কোন ব্রাউজারটিতে কী কাজ করে তা নিশ্চিত নয় তবে এটি কারওর জন্য কাজ করে: আইই: ওয়েবপৃষ্ঠাটি রিফ্রেশ হওয়া এবং ওয়েবসাইট পুনর্বিবেচনা করা হয় (রিফ্রেশ ছাড়াই) কাজ করে। ক্রোম: কেবল তখনই কাজ করে যখন ওয়েবপৃষ্ঠাকে রিফ্রেশ করা হয় (পুনর্বিবেচনার পরেও)। সাফারি এবং আইপ্যাড: কাজ করে না, আমাকে ইতিহাস এবং ওয়েব ডেটা সাফ করতে হবে।

সাফারি / আইপ্যাডের কোনও ধারণা?

Answer 8

কোনও ছবি আপলোড করার সময়, এর ফাইল নামটি ডাটাবেসে রাখা হয় না। এর নামকরণ করা হয়েছে Image.jpg (এটি ব্যবহার করার সময় কেবল জিনিসগুলি আউট করার জন্য)।

এটি পরিবর্তন করুন, এবং আপনি আপনার সমস্যা সমাধান করেছেন। উপরে প্রস্তাবিত সমাধানগুলির মতো আমি টাইমস্ট্যাম্পগুলি ব্যবহার করি: চিত্র- <টাইমস্ট্যাম্প> .jpg

সম্ভবত, চিত্রের জন্য একই ফাইলনামটি রেখে আপনি যে কোনও সমস্যা এড়িয়ে যাচ্ছেন তা কাটিয়ে উঠতে পারে, তবে তারা কী তা আপনি বলবেন না।

Answer 9

আমি ওয়েবে সমস্ত উত্তর যাচাই করেছিলাম এবং সেরাটি মনে হয়েছিল: (আসলে এটি তা নয়)

<img src="image.png?cache=none">

প্রথমে.

তবে, আপনি যদি ক্যাশে = কোনওটি প্যারামিটার যোগ করেন না (যা স্থিতিশীল "কিছুই নয়" শব্দ হয়) তবে এটি কোনও কিছুর উপর প্রভাব ফেলবে না, ব্রাউজার এখনও ক্যাশে থেকে লোড হয়।

এই সমস্যার সমাধান ছিল:

<img src="image.png?nocache=<?php echo time(); ?>">

যেখানে আপনি প্যারামিটারটিকে গতিশীল করতে এবং কোনও ক্যাশে না দেওয়ার জন্য মূলত ইউনিক্স টাইমস্ট্যাম্প যুক্ত করেছেন, এটি কার্যকর হয়েছে।

তবে, আমার সমস্যাটি কিছুটা আলাদা ছিল: আমি ফ্লাই জেনারেটেড পিএইচপি চার্ট চিত্রটি লোড করছিলাম এবং $ _GET পরামিতি সহ পৃষ্ঠাটি নিয়ন্ত্রণ করছিলাম। ইউআরএল জিইটি প্যারামিটার একই থাকে এবং যখন জিইটি প্যারামিটারগুলি পরিবর্তিত হয় তখন আমি ক্যাশে থেকে চিত্রটি পড়তে চেয়েছিলাম।

এই সমস্যাটি সমাধান করার জন্য, আমার হ্যাশ needed _GET দরকার ছিল তবে এটি অ্যারে হওয়ায় এটি সমাধান:

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

সম্পাদনা করুন :

যদিও উপরের সমাধানটি ঠিক কাজ করে তবে কখনও কখনও আপনি ফাইলটি পরিবর্তিত না হওয়া পর্যন্ত ক্যাশেড সংস্করণ পরিবেশন করতে চান। (উপরের সমাধান সহ, এটি পুরোপুরি সেই চিত্রটির জন্য ক্যাশে নিষ্ক্রিয় করে) সুতরাং ব্রাউজার থেকে ক্যাশেড চিত্র সরবরাহ করার জন্য চিত্র ফাইলের ব্যবহারের পরিবর্তন রয়েছে:

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

ফাইলমাইম () ফাইল পরিবর্তনের সময় পায়।

Comments

filemtimeসমাধান ভাল এটাও একটা কারণ হল md5প্রক্রিয়াকরণের ক্ষমতা অনেক সময় লাগে।

— অরিয়াদাম

চিত্রগুলি ক্যাচিং বন্ধ করতে ক্রোমিয়াম ভিত্তিক অ্যাপ্লিকেশন পাওয়ার চেষ্টা করে দিন অতিবাহিত করলেন। সময়ের প্রতিধ্বনির সাথে "নোট" বিষয়টি সমাধান করেছে। ধন্যবাদ!

— উডি

Answer 10

আপনার সমস্যাটি হ'ল Expires:শিরোনাম সত্ত্বেও , আপনার ব্রাউজারটি তার ক্যাশে যাচাই করার পরিবর্তে চিত্রটির আপডেট হওয়ার আগে থেকেই এর মেমরি অনুলিপিটি পুনরায় ব্যবহার করছে।

আমার মতো স্টোরের মতো সাইটের জন্য অ্যাডমিন ব্যাকএন্ডে পণ্য চিত্রগুলি আপলোড করার মতো পরিস্থিতি ছিল আমার, এবং আমার ক্ষেত্রে আমি সিদ্ধান্ত নিয়েছিলাম যে জাভাস্ক্রিপ্টটি কোনও চিত্র-রিফ্রেশকে বাধ্য করার জন্য, অন্য কোনও ইউআরএল-সংশোধনকারী কৌশল ব্যবহার না করেই জাভাস্ক্রিপ্ট ব্যবহার করা ছিল people ইতিমধ্যে এখানে উল্লেখ করা হয়েছে। পরিবর্তে, আমি চিত্রটি ইউআরএলকে একটি লুকানো আইএফআরএমে location.reload(true)রেখেছি, আইএফআরএম এর উইন্ডোতে ডেকেছি এবং তারপরে পৃষ্ঠায় আমার চিত্রটি প্রতিস্থাপন করেছি। এটি কেবলমাত্র আমি যে পৃষ্ঠায় আছি তা নয়, তবে যে কোনও ক্লায়েন্ট বা সার্ভারকে কোনও ইউআরএল কোয়েরিস্ট্রিং বা খণ্ড সনাক্তকারী পরামিতিগুলি মনে রাখার পরেও - কেবলমাত্র আমি যে পৃষ্ঠাটিতে রয়েছি তা ছাড়া এটি চিত্রটির একটি রিফ্রেশকে বাধ্য করে।

আমি আমার উত্তর এই কাজ করতে কিছু কোড পোস্ট এখানে ।

Answer 11

একটি সময় স্ট্যাম্প যোগ করুন <img src="picture.jpg?t=<?php echo time();?>">

আপনার ফাইলটি সর্বদা শেষে এলোমেলো নম্বর দেবে এবং এটি ক্যাচিং বন্ধ করবে

Comments

লক্ষণীয় যে এই সমাধানটি প্রয়োগ করা অনুরোধ অনুসারে সার্ভারের উপর চাপ সৃষ্টি করে এবং প্রয়োজনীয়ভাবে কাজ করবে না যেহেতু ব্রাউজার পিএইচপি পৃষ্ঠায় ক্যাশে করতে পারে যা প্রাথমিক অনুরোধের সময় উত্পন্ন সময় ধারণ করে যা ক্যাশে যায়। এটি কেবল নির্ভরযোগ্যভাবে কাজ করবে যদি পৃষ্ঠাটিতেও একটি গতিশীল কোয়েরি স্ট্রিং থাকে।

— দিমিত্রি

Answer 12

আপনার এবং ক্লায়েন্টের মধ্যে খারাপ আচরণ করার জন্য স্বচ্ছ প্রক্সির সম্ভাবনা সহ, চিত্রগুলি ক্যাশে হবে না এমন সম্পূর্ণ গ্যারান্টি দেওয়ার একমাত্র উপায় হ'ল তাদের একটি অনন্য ইউরি দেওয়া, কোয়েরি স্ট্রিং হিসাবে বা একটি অংশ হিসাবে টাইমস্ট্যাম্প ট্যাগ করার মতো কিছু something পথ।

যদি সেই টাইমস্ট্যাম্পটি চিত্রের শেষ আপডেটের সময়ের সাথে মিলে যায় তবে আপনি যখন সঠিক সময়ে নতুন চিত্রের প্রয়োজন হয় তখন আপনি ক্যাশে করতে পারেন।

Answer 13

আমি ধরে নিলাম মূল প্রশ্নটি কিছু পাঠ্য তথ্যের সাথে সঞ্চিত চিত্রগুলির প্রতি সম্মান জানায়। সুতরাং, src = ... url তৈরি করার সময় আপনার যদি কোনও পাঠ্য প্রসঙ্গে অ্যাক্সেস থাকে তবে অর্থহীন এলোমেলো বা টাইম স্ট্যাম্পের পরিবর্তে চিত্র বাইটগুলির CRC32 স্টোর / ব্যবহার বিবেচনা করুন। তারপরে, যদি প্রচুর চিত্র সহ পৃষ্ঠাটি প্রদর্শিত হয় তবে কেবলমাত্র আপডেট হওয়া চিত্রগুলি পুনরায় লোড করা হবে। অবশেষে, সিআরসি সংরক্ষণ করা যদি অসম্ভব হয় তবে এটি রানটাইমের সময় ইউআরএলে গণনা করা যায় এবং যুক্ত করা যায়।

Comments

বা, কোনও সিআরসি পরিবর্তে চিত্রের শেষ-সংশোধিত সময়টি ব্যবহার করুন, আরও ভাল!

— ডাইন

Answer 14

আমার দৃষ্টিকোণ থেকে, চিত্রসমূহের ক্যাচিং অক্ষম করা একটি খারাপ ধারণা। মোটেই

এখানে মূল সমস্যাটি হ'ল - কীভাবে ব্রাউজারটিকে চিত্র আপডেট করতে বাধ্য করা যায়, যখন এটি কোনও সার্ভার সাইডে আপডেট করা হয়।

আবার, আমার ব্যক্তিগত দৃষ্টিকোণ থেকে, সর্বোত্তম সমাধান হ'ল চিত্রগুলিতে সরাসরি অ্যাক্সেস অক্ষম করা। পরিবর্তে সার্ভার-সাইড ফিল্টার / সার্লেট / অন্যান্য অনুরূপ সরঞ্জাম / পরিষেবাদির মাধ্যমে চিত্রগুলি অ্যাক্সেস করুন।

আমার ক্ষেত্রে এটি একটি বিশ্রাম পরিষেবা, যা চিত্র দেয় এবং প্রতিক্রিয়াতে ইটাগ সংযুক্ত করে। পরিষেবাটি সমস্ত ফাইলের হ্যাশ রাখে, যদি ফাইল পরিবর্তন হয় তবে হ্যাশ আপডেট হয়। এটি সমস্ত আধুনিক ব্রাউজারে পুরোপুরি কাজ করে। হ্যাঁ, এটি বাস্তবায়নে সময় লাগে তবে এটি সার্থক।

একমাত্র ব্যতিক্রম - ফেভিকন। কিছু কারণে, এটি কাজ করে না। আমি ব্রাউজারকে সার্ভার দিক থেকে এর ক্যাশে আপডেট করতে বাধ্য করতে পারি না। ETags, ক্যাশে নিয়ন্ত্রণ, মেয়াদ উত্তীর্ণ, প্রাগমা শিরোনাম, কিছুই সাহায্য করেনি।

এই ক্ষেত্রে, ইউআরএল-এ কিছু এলোমেলো / সংস্করণ পরামিতি যুক্ত করা মনে হয়, এটিই একমাত্র সমাধান।

Answer 15

আদর্শভাবে, আপনার সামগ্রীতে সিঙ্ক্রোনাইজ করার বিকল্প সহ প্রতিটি ওয়েবপৃষ্ঠায় একটি বোতাম / কী-বাইন্ডিং / মেনু যুক্ত করা উচিত।

এটি করার জন্য, আপনি সংস্থান করার প্রয়োজন হতে পারে এমন সংস্থানগুলি ট্র্যাক করে রাখতে পারেন, এবং হয় ডায়ামিক ক্যোরিস্ট্রিং সহ চিত্রগুলি অনুসন্ধানের জন্য এক্সএইচআর ব্যবহার করুন, অথবা একটি গতিশীল ক্যোয়ারস্ট্রিং ব্যবহার করে এসআরসি দিয়ে রানটাইমতে একটি চিত্র তৈরি করবেন। তারপরে ওয়েবপৃষ্ঠাগুলির সমস্ত উপাদানগুলিকে অবহিত করার জন্য একটি ব্রডকাস্টিং মেকানিজম ব্যবহার করুন যা এটির ইউআরএলটিতে যুক্ত ডায়নামিক ক্যোরিস্ট্রিং সহ সংস্থানটি ব্যবহার করার জন্য সংস্থানটি আপডেট করার জন্য ব্যবহার করে।

একটি নিষ্পাপ উদাহরণ এরকম দেখাচ্ছে:

সাধারণত, চিত্রটি প্রদর্শিত এবং ক্যাশে করা হয়, তবে ব্যবহারকারী যদি বোতামটি টিপেন তবে একটি এক্সএইচআর অনুরোধ এটিতে সংযোজিত সময়ের ক্যোয়ারিংয়ের সাহায্যে উত্সকে প্রেরণ করা হবে; যেহেতু প্রতিটি প্রেসে সময়টি আলাদা বলে ধরে নেওয়া যায়, এটি ব্রাউজারটি ক্যাশে বাইপাস করবে তা নিশ্চিত করবে যেহেতু ক্যোয়ারির উপর ভিত্তি করে সার্ভারের পাশে উত্সটি গতিশীলভাবে উত্পন্ন হয়েছে কিনা, বা এটি স্থিতিশীল কিনা তা বলতে পারে না উত্স যা ক্যোয়ারী উপেক্ষা করে।

ফলাফলটি হ'ল আপনি আপনার ব্যবহারকারীদের সর্বদা রিসোর্স রিকোয়েস্টগুলিতে আপনাকে বোমা দেওয়া এড়াতে পারবেন, তবে একই সাথে ব্যবহারকারীদের যদি তারা সিঙ্কের বাইরে না থাকে সন্দেহ করে তাদের সংস্থানগুলি আপডেট করার জন্য একটি ব্যবস্থার অনুমতি দিন।

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="mobile-web-app-capable" content="yes" />        
    <title>Resource Synchronization Test</title>
    <script>
function sync() {
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {            
            var images = document.getElementsByClassName("depends-on-resource");

            for (var i = 0; i < images.length; ++i) {
                var image = images[i];
                if (image.getAttribute('data-resource-name') == 'resource.bmp') {
                    image.src = 'resource.bmp?i=' + new Date().getTime();                
                }
            }
        }
    }
    xhr.open('GET', 'resource.bmp', true);
    xhr.send();
}
    </script>
  </head>
  <body>
    <img class="depends-on-resource" data-resource-name="resource.bmp" src="resource.bmp"></img>
    <button onclick="sync()">sync</button>
  </body>
</html>

Answer 16

আমি একটি পিএইচপি স্ক্রিপ্ট তৈরি করেছি যা HTML পৃষ্ঠায় সমস্ত চিত্রের জন্য স্বয়ংক্রিয়ভাবে টাইমস্ট্যাম্পগুলি যুক্ত করে। আপনাকে কেবল আপনার পৃষ্ঠাগুলিতে এই স্ক্রিপ্টটি অন্তর্ভুক্ত করতে হবে। উপভোগ করুন!

http://alv90.altervista.org/how-to-force-the-browser-not-to-cache-images/

Answer 17

আপনাকে অবশ্যই একটি অনন্য ফাইল নাম ব্যবহার করতে হবে। এটার মত

<img src="cars.png?1287361287" alt="">

তবে এই কৌশলটির অর্থ উচ্চ সার্ভারের ব্যবহার এবং ব্যান্ডউইথের অপচয় was পরিবর্তে, আপনার সংস্করণ নম্বর বা তারিখটি ব্যবহার করা উচিত। উদাহরণ:

<img src="cars.png?2020-02-18" alt="">

তবে আপনি চান এটি কখনও ক্যাশে থেকে চিত্রটি পরিবেশন না করে। এর জন্য, পৃষ্ঠাটি পৃষ্ঠা ক্যাশে ব্যবহার না করে , পিএইচপি বা সার্ভারের পাশ দিয়ে এটি সম্ভব।

<img src="cars.png?<?php echo time();?>" alt="">

তবে এটি এখনও কার্যকর নয়। কারণ: ব্রাউজার ক্যাশে ... শেষ তবে সবচেয়ে কার্যকর পদ্ধতি হ'ল নেটিভ জাভাস্ক্রিপ্ট। এই সাধারণ কোডটি "NO-CACHE" শ্রেণি সহ সমস্ত চিত্র সন্ধান করে এবং চিত্রগুলি প্রায় অনন্য করে তোলে। এটি স্ক্রিপ্ট ট্যাগের মধ্যে রাখুন।

var items = document.querySelectorAll("img.NO-CACHE");
for (var i = items.length; i--;) {
    var img = items[i];
    img.src = img.src + '?' + Date.now();
}

, USAGE

<img class="NO-CACHE" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="">

ফলাফল পছন্দ করুন s

https://example.com/image.png?1582018163634