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




jquery w3schools (8)

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

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

}

https://code.i-harness.com

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

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

অর্থাৎ,

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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






jquery