ui - JQuery এ একটি উপাদান(চিত্র)পুনরায় লোড / রিফ্রেশ কিভাবে




w3schools ajax (11)

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

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

অর্থাৎ,

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

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

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

JQuery ডকুমেন্টেশনে, "লোড" ফাংশনটি নিখুঁত হবে যদি কোনও ইভেন্টের সফল / সম্পূর্ণ লোডের জন্য কলব্যাক ফাংশনটিকে বাঁধাই করার বিরোধিতা করে ইভেন্টটি ফায়ার করার ডিফল্ট পদ্ধতি থাকে।

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


Answers

আপনি ইমেজ ধারক এইচটিএমএল পুনরায় সেট করার চেষ্টা করেছেন। অবশ্যই ক্যাশিংয়ের ব্রাউজার থাকলে এটি সাহায্য করবে না।

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

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

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

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

//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);
}

এটি সম্ভবত সেরা উপায় নয়, তবে আমি জাভাস্ক্রিপ্ট ব্যবহার করে চিত্র URL এ টাইমস্ট্যাম্প যোগ করে অতীতে এই সমস্যাটি সমাধান করেছি:

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

পরবর্তী সময় এটি লোড হয়, টাইমস্ট্যাম্পটি বর্তমান সময়ে সেট করা হয় এবং URL ভিন্ন, তাই ব্রাউজারটি ক্যাশেড সংস্করণটি ব্যবহার করার পরিবর্তে চিত্রের জন্য GET করে।


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

<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
    }

}


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

  1. সার্ভার ইমেজ ক্যাশে হয়
  2. জাভাস্ক্রিপ্টটি ফায়ার বা অন্তত বৈশিষ্ট্যটি হালনাগাদ করে না

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

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

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


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

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

$(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>


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

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

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


কিছু বার আসলে সমাধান মত -

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

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

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

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

$('#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());
});

হাইওয়ে এর উত্তর দ্বারা অনুপ্রাণিত আমি নিম্নলিখিত সঙ্গে এসেছিলেন:

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

$.contains() দুটি DOM উপাদান নেয় এবং প্রথমটিতে দ্বিতীয়টি রয়েছে কিনা তা পরীক্ষা করে।

প্রথম যুক্তি হিসাবে document.documentElement ব্যবহার করে বিদ্যমান document.documentElement সেমেন্টিক পূরণ করে আমরা বর্তমান নথিতে একটি উপাদানটির অস্তিত্ব পরীক্ষা করার জন্য এটি প্রয়োগ করতে চাই।

নীচে, আমি $(sel)[0] এবং $(sel).length বিপরীতে jQuery.exists() তুলনা করে এমন একটি jQuery.exists() একসাথে jQuery.exists() পন্থা যা উভয় $(4) $(4).exists() $(4) এবং $(4).exists() false ফেরত। DOM একটি উপাদান অস্তিত্ব পরীক্ষা প্রসঙ্গে এই পছন্দসই ফলাফল বলে মনে হচ্ছে।

$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }
td { border: 1px solid black }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>





jquery