আমি কীভাবে jQuery ব্যবহার করে একটি "দয়া করে অপেক্ষা করুন, লোড হচ্ছে ..." অ্যানিমেশন তৈরি করতে পারি?
উত্তর:
আপনি এই বিভিন্ন উপায়ে করতে পারে। এটি "লোডিং ..." বলার মতো পৃষ্ঠায় একটি ছোট স্ট্যাটাসের মতো সূক্ষ্ম বা নতুন ডেটা লোড হওয়ার সময় পৃষ্ঠাটি ছড়িয়ে দেওয়ার কোনও সামগ্রীর মতো উচ্চস্বরে হতে পারে। আমি নীচে যাচ্ছি পদ্ধতির মাধ্যমে আপনাকে উভয় পদ্ধতি কীভাবে সম্পাদন করতে হবে তা দেখানো হবে।
সেটআপ
আসুন http://ajaxload.info
আমি একটি দুর্দান্ত "লোডিং" অ্যানিমেশনটি ব্যবহার করব be
আসুন আমরা একটি এজ্যাক্স অনুরোধ করছি যে কোনও সময় আমরা প্রদর্শন / লুকিয়ে রাখতে পারি এমন একটি উপাদান তৈরি করি:
<div class="modal"><!-- Place at bottom of page --></div>সিএসএস
এর পরে এটি কিছু উদ্দীপনা দিন:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}এবং অবশেষে, jQuery
ঠিক আছে, jQuery এ। পরবর্তী অংশটি আসলেই খুব সহজ:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});এটাই! আমরা দেহের উপাদানগুলিতে যে কোনও সময় ajaxStartবা ajaxStopইভেন্টগুলি সরিয়ে ফেলা হলে কিছু ইভেন্ট সংযুক্ত করছি । যখন একটি এজাক্স ইভেন্ট শুরু হয়, আমরা শরীরে "লোডিং" শ্রেণি যুক্ত করি। এবং ইভেন্টগুলি হয়ে গেলে, আমরা শরীর থেকে "লোডিং" শ্রেণিটি সরিয়ে ফেলি।
এটি কর্মে দেখুন: http://jsfiddle.net/VpDUG/4952/
.ajaxStop()এবং .ajaxStart()পদ্ধতিটি কেবল দস্তাবেজের সাথে সংযুক্ত থাকতে হবে। ডক্স
প্রকৃত লোডিং চিত্র হিসাবে , বিকল্পগুলির একগুচ্ছ জন্য এই সাইটটি দেখুন ।
একটি অনুরোধ শুরু হওয়ার সাথে সাথে এই চিত্রের সাথে একটি ডিআইভি প্রদর্শন করার ক্ষেত্রে আপনার কয়েকটি পছন্দ আছে:
ক) চিত্রটি ম্যানুয়ালি প্রদর্শন করুন এবং লুকান:
$('#form').submit(function() {
$('#wait').show();
$.post('/whatever.php', function() {
$('#wait').hide();
});
return false;
});খ) আজ্যাকস্টার্ট এবং এজ্যাক্স কমপ্লিট ব্যবহার করুন :
$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});এটি ব্যবহার করে উপাদানটি যে কোনও অনুরোধের জন্য / লুকিয়ে থাকবে । প্রয়োজনের উপর নির্ভর করে ভাল বা খারাপ হতে পারে।
গ) নির্দিষ্ট অনুরোধের জন্য স্বতন্ত্র কলব্যাকগুলি ব্যবহার করুন:
$('#form').submit(function() {
$.ajax({
url: '/whatever.php',
beforeSend: function() { $('#wait').show(); },
complete: function() { $('#wait').hide(); }
});
return false;
});জোনাথন এবং সমীর পরামর্শ দিয়েছিলেন (বিটিডব্লিউ উভয়ই দুর্দান্ত উত্তর!) এর সাথে সাথে, jQuery এর এমন কিছু ইভেন্ট রয়েছে যা এটি আপনার জন্য অজ্যাক্স অনুরোধ করার সময় প্রকাশিত হবে।
আছে ajaxStartঘটনা
যখনই একটি এজেএক্স অনুরোধ শুরু হয় (এবং কোনওটি ইতিমধ্যে সক্রিয় নেই) লোডিং বার্তাটি দেখান।
... এবং এটা ভাই, ajaxStopইভেন্ট
যখনই সমস্ত এজেএক্স অনুরোধগুলি শেষ হয়ে যায় তখন কার্যকর করতে একটি ফাংশন সংযুক্ত করুন। এটি একটি আজাক্স ইভেন্ট।
একসাথে, পৃষ্ঠার যে কোনও জায়গায় যখন কোনও আজাক্স ক্রিয়াকলাপ ঘটছে তখন তারা অগ্রগতির বার্তাটি দেখানোর একটি দুর্দান্ত উপায় তৈরি করে।
এইচটিএমএল:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>লিপি:
$(document).ajaxStart(function(){
$('#loading').show();
}).ajaxStop(function(){
$('#loading').hide();
});.ajaxStartকেবলমাত্র নথিতে সংযুক্ত হতে পারে, যেমন। $(document).ajaxStart(function(){}).
আপনি আজাক্সলোড থেকে একটি স্পিনিং সার্কেলের একটি অ্যানিমেটেড জিআইএফ দখল করতে পারেন - এটি আপনার ওয়েবসাইটের কোনও জায়গায় ফাইলের উত্তরাধিকারী stick তারপরে আপনাকে কেবল সঠিক কোড সহ একটি এইচটিএমএল উপাদান যুক্ত করতে হবে এবং আপনার হয়ে গেলে এটি সরিয়ে ফেলতে হবে। এটি মোটামুটি সহজ:
function showLoadingImage() {
$('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}
function hideLoadingImage() {
$('#loading-image').remove();
}তারপরে আপনাকে কেবল আপনার AJAX কলে এই পদ্ধতিগুলি ব্যবহার করতে হবে:
$.load(
'http://example.com/myurl',
{ 'random': 'data': 1: 2, 'dwarfs': 7},
function (responseText, textStatus, XMLHttpRequest) {
hideLoadingImage();
}
);
// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();এটিতে কয়েকটি সতর্কতা রয়েছে: প্রথমত, আপনার যদি দুটি বা ততোধিক জায়গা থাকে তবে লোডিং চিত্রটি প্রদর্শিত হতে পারে, আপনাকে একসাথে কতগুলি কল চলেছে তার ট্র্যাক কেপ করতে হবে এবং কেবলমাত্র যখন তারা থাকবে তখন লুকান সব শেষ. এটি একটি সাধারণ কাউন্টার ব্যবহার করে করা যেতে পারে, যা প্রায় সব ক্ষেত্রেই কাজ করা উচিত।
দ্বিতীয়ত, এটি কেবলমাত্র সফল এজেএক্স কলটিতে লোডিং চিত্রটি আড়াল করবে। ত্রুটি রাজ্যের হ্যান্ডেল করার জন্য, আপনাকে দেখব করতে হবে $.ajax, যা তুলনায় আরো জটিল $.load, $.getএবং মত কিন্তু আরো অনেক নমনীয় খুব।
showLoadingImageসেক্ষেত্রে আপনার শুরু করার আগে এবং hideLoadingImageশেষ করার পরে কেবল কল করুন । মোটামুটি সহজ হতে হবে। setTimeoutব্রাউজারটি <img>যদিও নতুন ট্যাগটি উপস্থাপন করেছে তা নিশ্চিত করার জন্য আপনাকে কোনও ধরণের কল আটকে রাখতে হবে - আমি বেশ কয়েকটি ক্ষেত্রে দেখেছি যেখানে জাভাস্ক্রিপ্ট কার্যকর হওয়া শেষ না হওয়া পর্যন্ত এটি বিরক্ত হয় না।
আইনা 8-তে জোনাথনের দুর্দান্ত সমাধানটি ভেঙে যায় (অ্যানিমেশনটি মোটেই প্রদর্শিত হয় না)। এটি ঠিক করতে, সিএসএস এতে পরিবর্তন করুন:
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};এজেএক্স অনুরোধ শুরু এবং শেষ হওয়ার জন্য jQuery ইভেন্ট হুক সরবরাহ করে। আপনার লোডারটি দেখানোর জন্য আপনি এগুলিতে হুক করতে পারেন।
উদাহরণস্বরূপ, নিম্নলিখিত ডিভ তৈরি করুন:
<div id="spinner">
<img src="images/spinner.gif" alt="Loading" />
</div>display: noneআপনার স্টাইলশীটে এটি সেট করুন । আপনি যা চান তা স্টাইল করতে পারেন। আপনি চাইলে অ্যাজাক্সলোডডিনফোতে একটি দুর্দান্ত লোডিং চিত্র তৈরি করতে পারেন।
তারপরে, আপনি আজাক্স অনুরোধগুলি প্রেরণ করার সময় এটি স্বয়ংক্রিয়ভাবে প্রদর্শিত হওয়ার জন্য নীচের মতো কিছু ব্যবহার করতে পারেন:
$(document).ready(function () {
$('#spinner').bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).hide();
});
});আপনার বডি ট্যাগটি বন্ধ করার আগে বা যেখানেই আপনি ফিট দেখেন কেবল এই পৃষ্ঠার শেষে কেবল এই জাভাস্ক্রিপ্ট ব্লকটি যুক্ত করুন ।
এখন, আপনি যখনই আজাক্স অনুরোধগুলি প্রেরণ করবেন, #spinnerদ্বি প্রদর্শিত হবে। অনুরোধটি সম্পূর্ণ হয়ে গেলে, এটি আবার গোপন করা হবে।
যদি আপনি রেলগুলির সাথে টার্বলিংকস ব্যবহার করেন তবে এটি আমার সমাধান:
এটি কফি স্ক্রিপ্ট
$(window).on 'page:fetch', ->
$('body').append("<div class='modal'></div>")
$('body').addClass("loading")
$(window).on 'page:change', ->
$('body').removeClass("loading")এটি জোনাথন সাম্পসনের প্রথম দুর্দান্ত উত্তরের ভিত্তিতে SASS CSS
# loader.css.scss
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, 0.4)
asset-url('ajax-loader.gif', image)
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}মার্ক এইচ এর মতই ব্লকইউআই হ'ল উপায়।
প্রাক্তন .:
<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
$("#downloadButton").click(function() {
$("#dialog").dialog({
width:"390px",
modal:true,
buttons: {
"OK, AGUARDO O E-MAIL!": function() {
$.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
send();
}
}
});
});
function send() {
$.ajax({
url: "download-enviar.do",
type: "POST",
blablabla
});
}
</script>ওবস: আমি http://www.ajaxload.info/ এ আজাক্স-লোডার.gif পেয়েছি
অন্যান্য পোস্টগুলির প্রতি যথাযোগ্য সম্মানের সাথে, আপনার কোনও বহিরাগত সংস্থান বা ফাইলগুলি ব্যবহার না করে CSS3 এবং jQuery ব্যবহার করে আপনার এখানে একটি খুব সহজ সমাধান রয়েছে।
$('#submit').click(function(){
$(this).addClass('button_loader').attr("value","");
window.setTimeout(function(){
$('#submit').removeClass('button_loader').attr("value","\u2713");
$('#submit').prop('disabled', true);
}, 3000);
});#submit:focus{
outline:none;
outline-offset: none;
}
.button {
display: inline-block;
padding: 6px 12px;
margin: 20px 8px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-image: none;
border: 2px solid transparent;
border-radius: 5px;
color: #000;
background-color: #b2b2b2;
border-color: #969696;
}
.button_loader {
background-color: transparent;
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #969696;
border-bottom: 4px solid #969696;
width: 35px;
height: 35px;
-webkit-animation: spin 0.8s linear infinite;
animation: spin 0.8s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
99% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
99% { transform: rotate(360deg); }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />এটি বোতামগুলি অদৃশ্য হয়ে যাবে, তারপরে "লোডিং" এর একটি অ্যানিমেশন তাদের জায়গায় উপস্থিত হবে এবং অবশেষে কেবল একটি সাফল্যের বার্তা প্রদর্শন করবে।
$(function(){
$('#submit').click(function(){
$('#submit').hide();
$("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
$.post("sendmail.php",
{emailFrom: nameVal, subject: subjectVal, message: messageVal},
function(data){
jQuery("#form").slideUp("normal", function() {
$("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
});
}
);
});
});আমি দেখেছি বেশিরভাগ সমাধান আমাদের প্রত্যাশা করে যে আমরা কোনও লোডিং ওভারলে ডিজাইন করব, এটি লুকিয়ে রাখব এবং তারপরে প্রয়োজনের সময় এটি লুকিয়ে রাখব, বা একটি জিআইএফ বা চিত্র ইত্যাদি দেখাব etc.
আমি একটি দৃust় প্লাগইন বিকাশ করতে চেয়েছিলাম, যেখানে একটি সহজ jQuery কল দিয়ে আমি লোডিং স্ক্রিনটি প্রদর্শন করতে পারি এবং টাস্কটি শেষ হয়ে গেলে এটি ছিন্ন করতে পারি।
নীচে কোড দেওয়া আছে। এটি ফন্ট দুর্দান্ত এবং jQuery উপর নির্ভর করে:
/**
* Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
**/
(function($){
// Retain count concept: http://stackoverflow.com/a/2420247/260665
// Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
var retainCount = 0;
// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
$.extend({
loadingSpinner: function() {
// add the overlay with loading image to the page
var over = '<div id="custom-loading-overlay">' +
'<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
'</div>';
if (0===retainCount) {
$(over).appendTo('body');
}
retainCount++;
},
removeLoadingSpinner: function() {
retainCount--;
if (retainCount<=0) {
$('#custom-loading-overlay').remove();
retainCount = 0;
}
}
});
}(jQuery)); উপরের অংশটি কেবল একটি জেএস ফাইলে রাখুন এবং এটি পুরো প্রকল্প জুড়ে অন্তর্ভুক্ত করুন।
সিএসএস সংযোজন:
#custom-loading-overlay {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
}
#custom-loading {
width: 50px;
height: 57px;
position: absolute;
top: 50%;
left: 50%;
margin: -28px 0 0 -25px;
}আবাহন:
$.loadingSpinner();
$.removeLoadingSpinner();নোট করুন যে এএসপি. নেট এমভিসি ব্যবহার করার সাথে সাথে using (Ajax.BeginForm(...সেটিংসটি ajaxStartকাজ করবে না।
AjaxOptionsএই সমস্যাটি কাটিয়ে উঠতে ব্যবহার করুন :
(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))প্রতি https://www.w3schools.com/howto/howto_css_loader.asp , এই কোন জাতীয় সঙ্গে একটি 2-পদক্ষেপ প্রক্রিয়া:
1. আপনি এই স্পিনারটি যেখানে চান এই এইচটিএমএল যুক্ত করুন: <div class="loader"></div>
২. আসল স্পিনার করতে এই সিএসএস যুক্ত করুন:
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}$("#loader").toggle();অ্যানিমেশনটি শুরু করার জন্য দীর্ঘকালীন অনুরোধ করার আগে কল করতে পারে এবং এটিকে আড়াল করার জন্য অনুরোধের কলব্যাক ফাংশনে অন্য কল করতে পারে।
আমি অ্যানিমেশন জন্য CSS3 ব্যবহার করি
/************ CSS3 *************/
.icon-spin {
font-size: 1.5em;
display: inline-block;
animation: spin1 2s infinite linear;
}
@keyframes spin1{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
/************** CSS3 cross-platform ******************/
.icon-spin-cross-platform {
font-size: 1.5em;
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin2 2s infinite linear;
}
@keyframes spin2{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
@-moz-keyframes spin2{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin2{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(359deg)}
}
@-o-keyframes spin2{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(359deg)}
}
@-ms-keyframes spin2{
0%{-ms-transform:rotate(0deg)}
100%{-ms-transform:rotate(359deg)}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
Default CSS3
<span class="glyphicon glyphicon-repeat icon-spin"></span>
</div>
<div class="col-md-6">
Cross-Platform CSS3
<span class="glyphicon glyphicon-repeat icon-spin-cross-platform"></span>
</div>
</div>