Aj .axax সম্পাদিত হওয়ার সময় লোডিং চিত্রটি দেখান

116

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

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

কোন ধারনা?

javascript jquery css

— ভোট দিন
সূত্র

254

আপনি অবশ্যই অনুরোধ করার আগে এটি প্রদর্শন করতে পারেন এবং এটি সম্পূর্ণ হওয়ার পরে এটি আড়াল করতে পারেন:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

আমি সাধারণত এটি বিশ্বব্যাপী এজাক্স স্টার্ট এবং এজাক্সটপ ইভেন্টগুলিতে আবদ্ধ হওয়ার আরও সাধারণ সমাধানটিকে পছন্দ করি, যেভাবে এটি সমস্ত এজাক্স ইভেন্টগুলির জন্য প্রদর্শিত হয়:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

— জ্যাক ব্লুম
সূত্র

30

JQuery 1.9 শুরু করে, AJAX ইভেন্টগুলি documentকেবলমাত্র সংযুক্ত করা উচিত । স্ট্যাকওভারফ্লো.com

— সিমোন

62

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

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

— jEremyB
সূত্র

সাধারণ স্নিপেটের জন্য আপনাকে ধন্যবাদ। সময় সংরক্ষণ @jEremyB

— Anahit DEV

এটি অনেক কার্যকর এবং সর্বজনীন তার পরে অনুমোদিত সমাধান। ধন্যবাদ.

— এরিক র্রবেল

20

এইচটিএমএল কোড:

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

সিএসএস কোড:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

জ্যাকুয়ারি কোড:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

— sumityadavbadli
সূত্র

8

অজ্যাক্স কল চলাকালীন "চিত্র" লোকেরা সাধারণত দেখায় এটি একটি অ্যানিমেটেড জিএফ। যেহেতু এজাক্স অনুরোধের শতাংশ সম্পূর্ণ নির্ধারণের কোনও উপায় নেই, তাই ব্যবহৃত অ্যানিমেটেড জিআইএফগুলি অনির্দিষ্টকক্ষ স্পিনার। এটি কেবলমাত্র একটি চিত্র যা বিভিন্ন আকারের চেনাশোনাগুলির বলের মতো বারবার পুনরাবৃত্তি করে। আপনার নিজস্ব কাস্টম অনিয়মিত স্পিনার তৈরি করার জন্য একটি ভাল সাইট হ'ল http://ajaxload.info/

— jEremyB
সূত্র

5

আমি মনে করি আপনার কাছে টন aj .জ্যাক্স কল থাকলে এটি আরও ভাল

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

বিঃদ্রঃ:

আপনি যদি সিএসএস ব্যবহার করেন। এজ্যাক্সটি আপনার ব্যাক-এন্ড কোড থেকে ডেটা আনার সময় আপনি যে উপাদানটি প্রদর্শন করতে চান তা অবশ্যই এর মতো হওয়া উচিত।

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

— ভয়ঙ্কর শিশু
সূত্র

1

এটি জেনেরিক হিসাবে এটি গ্রহণযোগ্য উত্তর হওয়া উচিত!

— রোটিমি

3

আমি BlockUIপ্লাগইনটি সর্বদা পছন্দ করেছি : http://jquery.malsup.com/ block/

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

— ঔজ্বল্যহীন
সূত্র

1

আপনার কল হওয়ার আগে কোথাও কোথাও ডিভিডি / স্প্যানে লোডিং চিত্রটি sertোকান এবং তারপরে সাফল্যের ফাংশনে সেই চিত্রটি সরান। বিকল্পভাবে আপনি লোডের মতো সিএসএস শ্রেণি সেট আপ করতে পারেন যা দেখতে এটি দেখতে পারে

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

এবং তারপরে এই শ্রেণীটিকে একটি স্প্যান / ডিভির জন্য বরাদ্দ করুন এবং সাফল্যের ফাংশনে এটি সাফ করুন

— ভাদিম
সূত্র

0

এটার মতো কিছু:

$('#image').show();
$.ajax({
    url: uri,
    cache: false,
    success: function(html){
       $('.info').append(html);
       $('#image').hide();
    }
});

— অ্যান্ডি
সূত্র

0

আপনি এজাক্স শুরু এবং সম্পূর্ণ ইভেন্টটি যুক্ত করতে পারেন, আপনি যখন বোতাম ইভেন্টে ক্লিক করেন তখন এটি কাজ করে

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

— রওশন বিশ্বকর্মা
সূত্র

0

আইডি = উদাহরণ_লোড সহ একটি এলিমেন্টের জন্য একটি লোড উপাদান তৈরি করুন।
স্টাইল = "প্রদর্শন: কিছুই নয়" যোগ করে এটি ডিফল্টরূপে লুকান।
এখন এটি আপনার এজাক্সের ঠিক উপরে jquery শো উপাদান ফাংশন ব্যবহার করে দেখান।

$('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });

— দীপক শর্মা
সূত্র

-1

**strong text**Set the Time out to the ajax calls
function testing(){
    
    $("#load").css("display", "block");
    setTimeout(function(){
    $.ajax({
             type: "GET",

          
             url:testing.com,
            
             async: false,
             
             success : function(response){
           
             alert("connection established");

              
            },
            complete: function(){
            alert("sended");
            $("#load").css("display", "none");
         
           },
            error: function(jqXHR, exception) {
                       alert("Write error Message Here");
                  },


       });
     },5000);


  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

<div id="load" style="display: none" class="loader"></div>
<input type="button"  onclick="testing()"  value="SUBMIT" >

স্নিপেট প্রসারিত করুন

— নরেন্দ্র রেড্ডি
সূত্র