অ্যাসিঙ্ক্রোনসিলে jQuery সহ চিত্রগুলি লোড করুন

Question

আমি jQuery ব্যবহার করে আমার পৃষ্ঠায় বহিরাগত চিত্রগুলি অবিচ্ছিন্নভাবে লোড করতে চাই এবং আমি নিম্নলিখিতগুলি চেষ্টা করেছি:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

তবে এটি সর্বদা ত্রুটি ফেরায়, এটির মতো চিত্রটি লোড করাও কি সম্ভব?

আমি ব্যবহার করার চেষ্টা করেছি .load পদ্ধতিটি এবং এটি কার্যকর হয় তবে চিত্রটি উপলভ্য না হলে কীভাবে আমি সময়সীমা নির্ধারণ করতে পারি তা আমার কোনও ধারণা নেই (404)। কিভাবে আমি এটি করতে পারব?

Comments

: আমার জন্য এই কাজ stackoverflow.com/questions/6150289/...

— MrRhoads

Answer 1

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

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

Comments

সময়সীমা এবং 404 এর সাথে কী করবেন?

— আরিফ

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

— আরিফ

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

— টম অগার 21

@ টমএগার: সুতরাং কীভাবে আমরা এটি সত্যই অবিচ্ছিন্ন করতে পারি? আমি কোডটি লোড () দিয়ে সবেমাত্র পরীক্ষা করেছি এবং এটি তাত্পর্যপূর্ণ নয়।

— বাসজিরো

@ জিডজিওর এটি আইই 8 তে কাজ করে না কারণ আপনি জকিউরি ব্যবহার করে আইই 8 তে এসআরসি বৈশিষ্ট্য নির্ধারণ করতে পারবেন না। এখানে উল্লেখ করুন: স্ট্যাকওভারফ্লো

— ধনী

Answer 2

আপনি যদি সত্যই এজ্যাক্স ব্যবহারের প্রয়োজন হয় ...

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

সমাধান ঘ

বেস 64 ইমেজ ডেটা এবং একটি রেস্ট ইমেজ পরিষেবা ব্যবহার করুন। আপনার যদি নিজের নিজস্ব ওয়েব সার্ভিস থাকে তবে আপনি একটি জেএসপি / পিএইচপি REST স্ক্রিপ্ট যুক্ত করতে পারেন যা বেস 64 এঙ্কোডিংয়ে চিত্র সরবরাহ করে। এখন কিভাবে এটি দরকারী? আমি চিত্র এনকোডিংয়ের জন্য একটি দুর্দান্ত নতুন সিনট্যাক্স জুড়ে এসেছি:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

সুতরাং আপনি Ajax ব্যবহার করে চিত্র বেস 64 ডেটা লোড করতে পারেন এবং তারপরে সমাপ্তির পরে আপনি চিত্রটিতে বেস 64 ডেটা স্ট্রিংটি তৈরি করেন! মহা আনন্দ :). আমি চিত্রটি এনকোডিংয়ের জন্য এই সাইটটি http://www.freeformatter.com/base64-encoder.html ব্যবহার করার পরামর্শ দিচ্ছি ।

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

Solution2:

ব্রাউজারটি এর ক্যাশে ব্যবহার করতে ট্রিক করুন। ব্রাউজারগুলির ক্যাশে থাকা অবস্থায় এটি আপনাকে একটি সুন্দর ফ্যাডইন দেয় ():

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});   

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

চিয়ার্স, হবে

Comments

যদি ব্রাউজার সমর্থনের বর্তমান অবস্থা আপনার কাছে গ্রহণযোগ্য হয় ( caniuse.com/#search=Blob ), আপনি ডেটা ইউআরআইয়ের পরিবর্তে ব্লব ব্যবহার করতে পারেন । বেস 64-এনকোডড ডেটা ইউআরআই ব্যবহার করার চেয়ে এটি 'কম' অনুভূত হয় এবং এটি মেমরির তুলনায় কম অপ্রয়োজনীয় (যেহেতু বেস 64 একটি মেমরি-দক্ষ বিন্যাস নয়), যদিও পরবর্তীকালে সম্ভবত সত্যিকারের বিশ্বের বেশিরভাগ সময়ই কিছু আসে যায় না।

— মার্ক অ্যামেরি

Answer 3

JQuery ব্যবহার করে আপনি কেবল "src" বৈশিষ্ট্যটি "ডেটা-এসসিআর" এ পরিবর্তন করতে পারেন। চিত্রটি লোড হবে না। তবে অবস্থানটি ট্যাগ সহ সঞ্চিত রয়েছে । যা আমি পছন্দ করি.

<img class="loadlater" data-src="path/to/image.ext"/>

একটি সহজ টুকরো জিকুয়েরি ডেটা-এসআরসি-কে এসআরসি-তে অনুলিপি করে, যা আপনার প্রয়োজন হলে চিত্রটি লোড করা শুরু করবে। আমার ক্ষেত্রে যখন পৃষ্ঠাটি লোড করা শেষ হয়।

$(document).ready(function(){
    $(".loadlater").each(function(index, element){
        $(element).attr("src", $(element).attr("data-src"));
    });
});

আমি বাজি দিয়েছি jQuery কোডটি সংক্ষেপে বর্ণিত হতে পারে তবে এটি এইভাবে বোধগম্য।

Comments

টিপ: আপনি যদি data-ট্যাগগুলি ব্যবহার করে থাকেন তবে তার $(element).data('src')পরিবর্তে এগুলি অ্যাক্সেস করা মোটামুটি সহজ$(element).attr('data-src')

— ম্যাক্সিম কুম্পান

আসলে আজ আমি jQuery আর ব্যবহার করব না। তবে ব্যক্তিগত রুচি নিয়ে প্রশ্ন আসে এবং আপনি যে ওয়েবসাইটটি তৈরি করছেন তার স্কেলের উপর নির্ভর করে depends তবে সেই সময়ের উত্তপ্ত বিষয় হ'ল "প্রগতিশীল চিত্রগুলি", এটি সম্ভবত দেখার বিষয়। smashingmagazine.com/2018/02/…

— hto

Answer 4

$(<img />).attr('src','http://somedomain.com/image.jpg');

এজাক্সের চেয়ে ভাল হওয়া উচিত কারণ যদি এটির কোনও গ্যালারী এবং আপনি ছবিগুলির একটি তালিকা দিয়ে লুপ করছেন, যদি চিত্রটি ইতিমধ্যে ক্যাশে রয়েছে তবে এটি সার্ভারে অন্য একটি অনুরোধ প্রেরণ করবে না। এটি jQuery / ajax এর ক্ষেত্রে অনুরোধ করবে এবং একটি HTTP 304 (সংশোধিত নয়) ফিরিয়ে দেবে এবং তারপরে যদি ইতিমধ্যে থাকে তবে ক্যাশে থেকে আসল চিত্রটি ব্যবহার করবে use উপরের পদ্ধতিটি গ্যালারিতে চিত্রগুলির প্রথম লুপের পরে সার্ভারের একটি খালি অনুরোধ হ্রাস করে।

Answer 5

আপনি ASYNC লোডিংয়ের জন্য একটি স্থগিত অবজেক্ট ব্যবহার করতে পারেন।

function load_img_async(source) {
    return $.Deferred (function (task) {
        var image = new Image();
        image.onload = function () {task.resolve(image);}
        image.onerror = function () {task.reject();}
        image.src=source;
    }).promise();
}

$.when(load_img_async(IMAGE_URL)).done(function (image) {
    $(#id).empty().append(image);
});

দয়া করে মনোযোগ দিন: ক্যাশে নিয়ে সমস্যা রোধ করতে ইমেজ.অনলোড অবশ্যই চিত্র.এসসিআর এর আগে হওয়া উচিত।

Answer 6

আপনি যদি কেবল চিত্রটির উত্স সেট করতে চান তবে আপনি এটি ব্যবহার করতে পারেন।

$("img").attr('src','http://somedomain.com/image.jpg');

Answer 7

এটিও কাজ করে ..

var image = new Image();
image.src = 'image url';
image.onload = function(e){
  // functionalities on load
}
$("#img-container").append(image);

Answer 8

এএএএআইএফকে আপনাকে .ajax () এর প্রস্তাবিত হিসাবে এখানে একটি লোড () ফাংশন করতে হবে, তবে আপনি লাইভ রাখার জন্য jQuery সেটটাইমআউট ব্যবহার করতে পারেন (ইস)

<script>
 $(document).ready(function() {
 $.ajaxSetup({
    cache: false
});
 $("#placeholder").load("PATH TO IMAGE");
   var refreshId = setInterval(function() {
      $("#placeholder").load("PATH TO IMAGE");
   }, 500);
});
</script>

Comments

দুঃখিত আমি আপনার

— প্রশ্নকে

Answer 9

আপনার চিত্র লোড করতে। লোড ব্যবহার করুন। আপনি যদি কোনও ত্রুটি পান তবে পরীক্ষা করতে (আসুন 404 বলুন) আপনি নিম্নলিখিতটি করতে পারেন:

$("#img_id").error(function(){
  //$(this).hide();
  //alert("img not loaded");
  //some action you whant here
});

সতর্কতা - এসআরসি বৈশিষ্ট্যটি যখন কোনও চিত্রের জন্য খালি থাকে তখন .error () ইভেন্টটি ট্রিগার করবে না।

Answer 10

function (ফাংশন () {

    if ($('#hdnFromGLMS')[0].value == 'MB9262') {
        $('.clr').append('<img src="~/Images/CDAB_london.jpg">');
    }
    else
    {
        $('.clr').css("display", "none");
        $('#imgIreland').css("display", "block");
        $('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
    }
});

Comments

এটি নিখুঁতভাবে কাজ করছে, হোম পেজ লোড করার সময় আমরা বিভিন্ন চিত্র স্থাপন করতে পারি - পোলারিস থেকে

— মাধবীলতা বাথিনী

অত্যধিক বিশৃঙ্খলা, প্রশ্নের উত্তর দেওয়ার সাথে সম্পর্কিত নয়।

— ম্যাক্সিম কুম্পান