কীভাবে jQuery এ কোনও উপাদান (চিত্র) রিলোড / রিফ্রেশ করবেন

Question

JQuery ব্যবহার করে কোনও সার্ভার থেকে অভিন্ন ফাইলের নাম সহ কোনও চিত্র পুনরায় লোড করা সম্ভব?

উদাহরণস্বরূপ, আমার একটি পৃষ্ঠায় একটি চিত্র রয়েছে, তবে ব্যবহারকারীর ক্রিয়াগুলির উপর ভিত্তি করে দৈহিক চিত্রটি পরিবর্তন হতে পারে। দ্রষ্টব্য, এর অর্থ এই নয় যে ফাইলটির নাম পরিবর্তন হয় তবে আসল ফাইলটি নিজেই।

অর্থাৎ,

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

নীচের কোডটি যতবারই বলা হোক না কেন, একই সমস্যা অব্যাহত থাকে।

$("#myimg").attr("src", "/myimg.jpg");

JQuery ডকুমেন্টেশনে, "লোড" ফাংশনটি সঠিক হবে যদি ইভেন্টের ফায়ারিংয়ের কোনও ডিফল্ট পদ্ধতি যদি কোনও উপাদানটির সফল / সম্পূর্ণ লোডের সাথে কলব্যাক ফাংশনকে আবদ্ধ করার বিপরীতে থাকে firing

যেকোনো সহযোগিতা বিষেশভাবে সমাদৃত.

Comments

@ অ্যালেক্সিস, আপনার সমস্যাটি কি চিত্রটি ব্রাউজারে ক্যাশে হয়েছে এবং এটি সার্ভারে পরিবর্তিত হওয়ার পরে আপডেট হবে না?

— জয়

@ জিরোস, আমি বিশ্বাস করি এটি সমস্যাটি কারণ ফাইলটি আসলে পরিবর্তিত হয় (একই ফাইলের নাম) এবং আপনি যদি একটি পূর্ণ পৃষ্ঠা রিফ্রেশ করেন তবে পৃষ্ঠায় প্রতিফলিত হবে।

— অ্যালেক্সিস অর্রিল

Answer 1

দেখে মনে হচ্ছে এটি আপনার ব্রাউজারটি চিত্রটি ক্যাশে করছে (যা আমি এখন লক্ষ্য করেছি যে আপনি আপনার প্রশ্নে লিখেছেন)। আপনি ব্রাউজারটিকে এই জাতীয় অতিরিক্ত ভেরিয়েবল পাস করে পুনরায় লোড করতে বাধ্য করতে পারেন:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

Comments

ক্যোরির স্ট্রিং ভেরিয়েবল যুক্ত করা আমার মনকে পুরোপুরি উত্তীর্ণ করেছিল। এটি সমাধান করেছে এবং চিত্রটি এখন অনুরোধে পুনরায় লোড হয়।

— অ্যালেক্সিস অর্রিল

গ্যাংস্টা টিপ, এটি পছন্দ করুন

— ডেভ জেলিসন

এটি কাজ করে, এবং এটি একটি দুর্দান্ত কাজ, কিন্তু এখনও একটি কর্মচক্র! ব্রাউজারকে ক্যাশেডটির কথা ভুলে যাওয়ার জন্য ছবিটি আনার কোনও আলাদা উপায় নেই?

— spuas

আমার কাছে সত্যিই বাছাই করা ওয়েবক্যাম রয়েছে যা দেখে মনে হচ্ছে স্থির চিত্রগুলির জন্য কোনও অনুরোধ নিষিদ্ধ করছে যা পরামিতিগুলি ধারণ করে। বিতৃষ্ণা। এটি অন্যথায় একটি দুর্দান্ত সমাধান।

— ডাঙোয়ানস

@TomasGonzalez বি / সি সেখানে হয় সঙ্গে একটি সংঘর্ষের পাবার সুযোগ randomআর চিরকাল সাথে থাকতে করা উচিত নয় Dateযদি না আপনি আছেন সত্যিই সত্যিই দ্রুত। ;।) ক্লায়েন্টের সাথে একটি তারিখ পাওয়া সেই সংস্থানটি নিবিড় নয় এবং আপনি একবারে টানতে যতগুলি চিত্রের পুনরায় ব্যবহার করতে পারেন, তাই 4 পদক্ষেপে এগিয়ে যান।

— ruffin

Answer 2

এটি সম্ভবত সবচেয়ে ভাল উপায় নয় তবে জাভাস্ক্রিপ্ট ব্যবহার করে ইমেজ ইউআরএলটিতে কেবল টাইমস্ট্যাম্প যুক্ত করে আমি এই সমস্যাটি সমাধান করেছি:

$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

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

Comments

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

— felwithe

@ ফিলিওথ, এই সার্ভারটি কি ক্যোয়ারির শেষে কেবল এক্সটেনশনের জন্য দেখায়? সুতরাং আপনি এই পদ্ধতির পরীক্ষার চেষ্টা করতে পারেন: imagename.jpg?t=1234567&q=.jpgবাimagename.jpg#t1234567.jpg

— ফ্লেমস্টোরম

Answer 3

আপনি যে দুটি সমস্যার কথা উল্লেখ করেছেন তার মধ্যে এটি অন্যতম হতে পারে।

1. সার্ভারটি চিত্রটি ক্যাশে করছে
2. JQuery ফায়ার করে না বা কমপক্ষে বৈশিষ্ট্যটি আপডেট করে না

সত্যি কথা বলতে, আমি মনে করি এটি দ্বিতীয় নম্বরে। আমরা আরও কিছু jQuery দেখতে পারলে অনেক সহজ হত। তবে শুরু করার জন্য প্রথমে গুনটি সরানোর চেষ্টা করুন এবং তারপরে আবার সেট করুন। এটি সাহায্য করে কিনা তা দেখার জন্য:

$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");

এমনকি যদি এটি কাজ করে তবে কিছু কোড পোস্ট করুন কারণ এটি অনুকূল নয়, ইমো :-)

Comments

@ কর্ডোনমে, এখানেই কেউ "খারাপ" jQuery সম্পর্কে মন্তব্য করেছেন? (আমি মজা করছি, আমি মজা করছি);)

— জে

@ কর্ডোনমে, এটি আসলে একটি ইভেন্ট হ্যান্ডলারে অনুষ্ঠিত হয় এবং এই মুহুর্তে কোডের একমাত্র লাইন। ইভেন্টটি আসলে গুলি চালানো হচ্ছে তা যাচাই করার জন্য আমি এই লাইনের ঠিক আগে একটি সতর্কতা যুক্ত করেছি। ইভেন্টটি কোনও ত্রুটি ছাড়াই আগুন দেয়।

— অ্যালেক্সিস অর্রিল

আমার কাছে সত্যিই বাছাই করা ওয়েবক্যাম রয়েছে যা দেখে মনে হচ্ছে স্থির চিত্রগুলির জন্য কোনও অনুরোধ নিষিদ্ধ করছে যা পরামিতিগুলি ধারণ করে। বিতৃষ্ণা। এটি আমার অনন্য মামলার দুর্দান্ত সমাধান। ধন্যবাদ।

— dangowans

আপনি যদি চান না / অবশিষ্ট পরামিতিগুলির প্রয়োজন না হন তবে এটিই সেরা উত্তর

— রাফাশী

ধন্যবাদ এটি সাহায্য করেছে (এটি কেবল ক্রোমে আমার জন্য এটি ক্যাশে করেছে)

— ড্যানিয়েল রেচ

Answer 4

জাভাস্ক্রিপ্টে চিত্র এসসিআর হার্ডকডিং সম্পর্কে কোনও উদ্বেগ ছাড়াই এক লাইনের সাথে (ধারণাগুলির জন্য জিরোস ধন্যবাদ:

$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());

Comments

শুধু সাবধান থাকুন কারণ এটি URL এর শেষের দিকে অসীম আরও বেশি সংখ্যক অক্ষর যুক্ত করবে

— আলফো

Answer 5

বাইপাস ক্যাশে করার এবং ইমেজ URL এ অসীম টাইমস্ট্যাম্প যোগ এড়িয়ে চলুন একটি নতুন এক যোগ করার আগে পূর্ববর্তী টাইমস্ট্যাম্প স্ট্রিপ, এই আমি এটি সম্পন্ন করেছি।

//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);

function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
    //get the src attribute
    source = jQuery(".xyro_refresh").attr("src");
    //remove previously added timestamps
    source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
    //prep new src attribute by adding a timestamp
    new_source = source + "?timestamp="  + new Date().getTime();
    //alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
    //set the new src attribute
    jQuery(".xyro_refresh").attr("src", new_source);
}

Answer 6

এটি দুর্দান্ত কাজ করে! তবে আপনি যদি এসআরসি একাধিকবার পুনরায় লোড করেন তবে টাইমস্ট্যাম্পটিও ইউআরএলকে একত্রিত করে। আমি এটি মোকাবেলায় গৃহীত উত্তর পরিবর্তন করেছি।

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

Answer 7

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

function imageUploadComplete () {
    $("#image_container").html("<img src='" + newImageUrl + "'>");
}

Answer 8

কিছু সময় আসলে সমাধান যেমন -

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

এছাড়াও এসআরসি সঠিকভাবে রিফ্রেশ করবেন না, এটি চেষ্টা করে দেখুন - এটি আমার জন্য কাজ করেছে ->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

Answer 9

"#" একটি ডিলিমিটার হিসাবে ব্যবহার করা কার্যকর হতে পারে

আমার চিত্রগুলি "www" এর উপরে একটি "লুকানো" ফোল্ডারে রাখা হয়েছে যাতে কেবল লগইন করা ব্যবহারকারীরা তাদের অ্যাক্সেসের অনুমতি পান। এই কারণে আমি সাধারণটি ব্যবহার করতে পারি না <img src=/somefolder/1023.jpg>তবে আমি সার্ভারে অনুরোধগুলি প্রেরণ করি <img src=?1023>এবং এটি '1023' নামে রাখা চিত্রটি ফিরে পাঠিয়ে সাড়া দেয়।

অ্যাপ্লিকেশনটি চিত্রের ক্রপিংয়ের জন্য ব্যবহৃত হয়, তাই ছবিটি ক্রপ করার জন্য অজ্যাক্সের অনুরোধের পরে এটি সার্ভারে সামগ্রী হিসাবে পরিবর্তিত হলেও এটির আসল নাম রাখে। শস্যের ফলাফল দেখতে, এজাক্স অনুরোধটি শেষ হওয়ার পরে, প্রথম চিত্রটি ডিওএম থেকে সরানো হবে এবং একই নামে একটি নতুন চিত্র সন্নিবেশ করা হবে <img src=?1023>।

নগদ অর্থ এড়ানোর জন্য আমি অনুরোধটিতে "#" ট্যাগটি "#" দিয়ে চাপিয়ে দিয়েছি যাতে এটি হয়ে যায় <img src=?1023#1467294764124>। সার্ভারটি স্বয়ংক্রিয়ভাবে অনুরোধের হ্যাশ অংশ ফিল্টার করে এবং আমার চিত্রটি '1023' হিসাবে ফেরত পাঠিয়ে সঠিকভাবে প্রতিক্রিয়া জানায়। সুতরাং আমি সর্বদা খুব সার্ভার-সাইড ডিকোডিং ছাড়াই চিত্রের শেষ সংস্করণটি পাই।

Comments

কেন একটি চিত্র পরিবেশন করতে সমস্ত সমস্যার মধ্য দিয়ে যেতে? অর্থহীন ঝামেলার মতো মনে হচ্ছে

— লুকাশ্রেতা

Answer 10

আমাকে বেশ কয়েকবার চিত্রের উত্স পুনরায় লোড করতে হতে পারে। আমি লোডাশের সাথে একটি সমাধান পেয়েছি যা আমার পক্ষে ভালভাবে কাজ করে:

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

একটি বিদ্যমান টাইমস্ট্যাম্প কেটে কেটে একটি নতুন দিয়ে প্রতিস্থাপন করা হবে।

Answer 11

@ ক্যাস্পার তাইয়েমানস এর উত্তরের ভিত্তিতে।

আপনার যদি কেবল চিত্র পুনরায় লোডের প্রয়োজন হয় (এটি এসআরসি নতুনের সাথে প্রতিস্থাপন করবেন না), চেষ্টা করুন:

$(function() {
  var img = $('#img');

  var refreshImg = function(img) {
    // the core of answer is 2 lines below
    var dummy = '?dummy=';
    img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());

    // remove call on production
    updateImgVisualizer();
  };


  // for display current img url in input
  // for sandbox only!
  var updateImgVisualizer = function() {
    $('#img-url').val(img.attr('src'));
  };

  // bind img reload on btn click
  $('.img-reloader').click(function() {
    refreshImg(img);
  });

  // remove call on production
  updateImgVisualizer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">


<p>
  <label>
    Current url of img:
    <input id="img-url" type="text" readonly style="width:500px">
  </label>
</p>

<p>
  <button class="img-reloader">Refresh</button>
</p>

Answer 12

আমি কেবল এইচটিএমএল করে:

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

এবং এই জাতীয় কোডটির পিছনে কোডটি পুনরায় লোড করুন:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}

Comments

পৃষ্ঠাটি পুনরায় লোড করা এবং এ্যাস.নেট ওয়েব ফর্মগুলিতে সেট করা এখানে আসলে বিষয়টিতে নেই on

— জোনাস স্টেনসভেড