უსასრულო გადახვევის Super WordPress მოდული. Ajax ტექნოლოგია WordPress-ისთვის: დანამატები და მათი მნიშვნელობა AJAX ტექნოლოგია: ვებსაიტის მონაცემების განახლება ხელახალი განახლების გარეშე

თუ ჩემს საიტზე გადადიხართ გვერდზე ან რომელიმე კატეგორიაში, მაშინ გვერდის ბოლოში, ძირითადი გვერდითი ნავიგაციის გვერდით დააკლიკეთ Engage ღილაკს, რომელიც საშუალებას გაძლევთ მონიშნოთ მიმდინარე პოსტები საიტის განახლების გარეშე. Inki .

პირდაპირ გეტყვით, ჩემს საიტზე არის გვერდებზე ნავიგაციის ერთგვარი შამანური გზა - მე დიდი ხანია ვიკვლევ ამ ნავიგაციას და ალბათ ამ მომენტში PHP-თან და jQuery-სთან დაკავშირებით ასეთი პრობლემა არ მქონია. . ახლა მე გაჩვენებთ პოსტ-გვერდის ნავიგაციის განხორციელების უფრო სწორ და ეფექტურ გზას ახალი პოსტების ასინქრონული ჩართვის შესაძლებლობით. ასე რომ, თქვენ არ გჭირდებათ ჩემი საიტის კოდის ნახვა, მაგრამ თუ თქვენ გაქვთ საკვები, მაშინ დარგვამდე მოძებნეთ მტკიცებულებები მათზე კომენტარებში ან შეხედეთ მას.

გამოიყენება სტანდარტული TwentySeventeen თემით, უპირველეს ყოვლისა, ეს თემა მარტივია და არ არის საჭირო კოდირებაზე ფიქრი, წინააღმდეგ შემთხვევაში შეგიძლიათ დააინსტალიროთ იგი პირდაპირ ადმინისტრატორის ზონიდან WordPress თემების საცავიდან.

რისი შოვნას ვეცდებით ამ დარგვიდან?

  • Vantage პოსტები, როდესაც დააწკაპუნებთ Vanquish more ღილაკზე.
  • უსაზღვრო ყურადღება, შეტყობინებები და კომენტარები ავტომატურად იქნება მონიშნული, როდესაც გადახვალთ გვერდზე (ისევე, როგორც VKontakte-ზე).
  • მოდით დავრწმუნდეთ, რომ პოსტების ზრდა მუშაობს ნებისმიერ არქივზე.
Croc 1. ღილაკის „გასართობი“ დამატება

დასაწყისისთვის, ჩვენ უნდა ვიცოდეთ ფაილი, რომელიც საშუალებას იძლევა ზურგის უკან ნავიგაცია. TwentySeventeen-ის ფაილი არის მხოლოდ index.php. თუ არ გესმით, რომელი ფაილები უნდა მოძებნოთ თქვენს თემაში, გირჩევთ გადახედოთ.

თუ თქვენ გაიმარჯვეთ სტანდარტულ თემებზე (მე როგორც მე), მაშინ შეგახსენებთ, რომ ცვლილებებისთვის საჭიროა vikorist (მოხსენება ვიდეოზე პოსტის ბოლოში).

იპოვნეთ სხვა ადგილი შაბლონში while ციკლს შორის, პოსტების ჩვენების დასრულების შემდეგ (TwentySeventeen-ისთვის ეს ადგილი პრაქტიკულად არის endwhile-ის შემდეგ) და ჩადეთ კოდი იქ:

var ajaxurl = ""; var მიმდინარე_გვერდი =; var max_pages = ""; უპირატესობა

Ajaxurl Tse WordPress-ში. true_posts სერიალიზაციის მასივი ჩანაწერში ყველა საჭირო პარამეტრის ჩასაწერად, ე. მიმდინარე_გვერდის ნომერი.

ახლა კი რამდენიმე სტილს, რომლებსაც დავამატებთ ჩვენს ღილაკს, რათა ის მაგარი იყოს (სტილები შეიძლება ჩასვათ სტანდარტულ style.css-ში თემების საქაღალდეში).

#true_loadmore (ფონის ფერი: #ddd; /* სერვისი ზედა */ საზღვარი-რადიუსი: 2 პიქსელი; /* მომრგვალებული კიდეები */ ჩვენება: ბლოკი; /* ბლოკის ელემენტი, მხოლოდ თქვენთვის, თუ გსურთ ვიკორი */ text-align: ცენტრში; /* ცენტრალური ტექსტი */ font-size : 14px; შრიფტის ზომა: 0.875rem; /* შრიფტის ზომა */ font-weight : 800 ; /* ასო */ ასოების ინტერვალი : 1px; /* ინტერვალი */ კურსორი: მაჩვენებელი; /* მაუსის კურსორი მაუსის დაჭერისას იგივეა, რაც შეტყობინებაზე გადასვლისას */ text-transform : uppercase ; padding: 10px 0; /* ცხოველის შიდა შესასვლელი და ღილაკის ქვემოთ */ გარდამავალი : ფონის ფერი 0.2 წმ ease-in-out, border-color 0.2s ease-in-out, ფერი 0.3s ease-in-out; /* CSS ანიმაცია*/ ) #true_loadmore :hover (ფონის ფერი: #767676; ფერი: #fff;)

პირველი თაობის წარმატებულ გამარჯვებულებს დასჭირდებათ ეს ღილაკი, რომელიც მოგთხოვთ გამოჩნდეთ ყველა ჩანაწერის გვერდზე, მაგრამ გაითვალისწინეთ, რომ თუ არ არის საკმარისი ჩანაწერები ორი გვერდისთვის, მაშინ არ იქნება ღილაკი ვისთვის ან შექმენით მეტი ჩანაწერი. iv, ან გადადით პარამეტრებში > წაიკითხეთ და შეცვალეთ იქ პოსტის გვერდზე ნაჩვენები სურათების რაოდენობა.

ყველაზე მსუბუქი კროკი უკან.

გაკვეთილი 2. jQuery სკრიპტების დაკავშირება
var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = ""; var მიმდინარე_გვერდი =;

სხვა სიტყვებით რომ ვთქვათ, ჩვენ აღარ გვჭირდება CSS სტილები, რადგან თქვენ დაამატეთ ისინი, შეგიძლიათ უბრალოდ წაშალოთ ისინი.

მესამე, loadmore.js ფაილის ნაცვლად, შეცვალეთ:

jQuery(function ($) ( $(window) .scroll (function () ( var bottomOffset = 2000 ); // წვდომა საიტის ბოლოში, სანამ მომხმარებელი პასუხისმგებელია გადახვევაზე ისე, რომ ახალი პოსტები გამოჩნდეს var მონაცემები = ( "action" : "loadmore" , "query" : true_posts, "page" : current_page) ; if ($(document).scrollTop() > ($(document).height() - bottomOffset) && ! $(" body" ) ) ($ .ajax (( url: ajaxurl, data: data, type: "POST" , beforeSend: ფუნქცია ( xhr) ( $("body" ) ;) , წარმატება: ფუნქცია (მონაცემები) ( if ( მონაცემები ) ($(" # true_loadmore" ) ​​.წინა (მონაცემები) ; $("სხეული") ; მიმდინარე_გვერდი++; ) ) ) ; ) ) ) );

functions.php ფაილი (ხაზები 2 და 4) წაიშლება ცვლილებების გარეშე.

Ajax Load More არის WordPress-ის უსასრულო გადახვევის საბოლოო დანამატი პოსტების, ცალკეული პოსტების, გვერდების, კომენტარების და სხვათა ზარმაცი ჩატვირთვისთვის Ajax Powered Queries-ით.

შექმენით რთული საბაჟო WordPress მოთხოვნები Ajax Load More მოკლე კოდით Builder ჩასვამს მოკლე კოდს თქვენს გვერდით გვერდზე რედაქტორის გამოყენებით ან პირდაპირ თქვენს შაბლონის ფაილებში.

Ajax Load More თავსებადია გაუთავებელი გადახვევისთვის ელექტრონული კომერციის პოპულარულ დანამატებთან, როგორიცაა WooCommerce და Easy Digital Downloads.

მახასიათებლები
  • Shortcode Builder - შექმენით თქვენი საკუთარი Ajax Load მეტი მოკლე კოდი მიუთითებს WordPress-ის სხვადასხვა პარამეტრებზე ჩვენს სახელმძღვანელოში მოკლე კოდის შემქმნელში (იხ. Shortcode Parameters).
  • შეკითხვის პარამეტრები — Ajax Load More გაძლევთ საშუალებას შეკითხოთ WordPress შეკითხვა პოსტის ტიპის, პოსტის ფორმატის, თარიღის, კატეგორიის, ტეგების, მორგებული ტაქსონომიების, საძიებო ტერმინების, ავტორების და სხვათა მიხედვით!
  • Repeater Templates — დაარედაქტირეთ და გააფართოვეთ Ajax Load More-ის ფუნქციონალობა თქვენი საკუთარი განმეორებითი შაბლონის შექმნით, რათა შეესაბამებოდეს თქვენი ვებსაიტის იერსახეს და შეგრძნებას (იხილეთ ეკრანის ანაბეჭდები).
  • მრავალი შემთხვევა - შეგიძლიათ ჩართოთ Ajax Load More-ის მრავალი მაგალითი ერთ გვერდზე, პოსტზე ან შაბლონზე.
  • Ajax Filtering — Ajax Load More პერსონალური ფილტრაციის მეთოდი საშუალებას მოგცემთ გაფილტროთ და განაახლოთ თქვენი Ajax-ის მოთხოვნის შედეგები.
  • Multisite Compatibility — მართეთ განმეორებითი შაბლონები თქვენი ქსელის ყველა საიტზე.
  • პარამეტრების პანელი — შეცვალეთ თქვენი ვერსია Ajax Load More სხვადასხვა მოდულის პარამეტრების განახლებისთვის.
  • გამეორება - აირჩიეთ განმეორებითი შაბლონი (დამატება ხელმისაწვდომია). ნაგულისხმევი = 'ნაგულისხმევი'
  • post_type - მძიმით გამოყოფილი პოსტის ტიპების სია. ნაგულისხმევი = 'პოსტი'
  • sticky_posts — შეინახეთ წებოვანი პოსტის შეკვეთა Ajax-ის ჩამონათვალისთვის. ნაგულისხმევი = ყალბი
  • post_format - შეკითხვა პოსტის ფორმატით. ნაგულისხმევი = null
  • კატეგორია — მძიმით გამოყოფილი კატეგორიის სია, რომელიც უნდა შეიცავდეს შლაგს. ნაგულისხმევი = null
  • კატეგორია__და — მძიმით გამოყოფილი კატეგორიების სია, რომლებიც უნდა შეიტანოს ID-ით. ნაგულისხმევი = null
  • category__not_in — მძიმით გამოყოფილი კატეგორიების სია, რომლებიც გამოირიცხება ID-ით. ნაგულისხმევი = null
  • ტეგი - მძიმით გამოყოფილი სიის ტეგები, რომლებიც უნდა შეიტანოს შლაგის მიხედვით. ნაგულისხმევი = null
  • tag__and — ინფორმაცია იმ შენობების შესახებ, რომლებიც ცალკეული შენობების ტეგებია ID-ით. ნაგულისხმევი = null
  • tag__not_in — მძიმით გამოყოფილი თეგების სია, რომლებიც გამოირიცხება ID-ით. ნაგულისხმევი = null
  • ტაქსონომია - მოთხოვნა საბაჟო ტაქსონომიის სახელით. ნაგულისხმევი = null
  • taxonomy_terms — საბაჟო ტაქსონომიის ტერმინების (slug) მძიმით გამოყოფილი სია. ნაგულისხმევი = null
  • ტაქსონომია_ოპერატორი
  • ტაქსონომია_დაკავშირება - ლოგიკური ურთიერთობა თითოეულ ტაქსონომიას შორის, როდესაც არის ერთზე მეტი. (და/ან). ნაგულისხმევი = 'და'
  • დღე - კვირის დღე. ნაგულისხმევი = null
  • თვე - წელიწადის თვე. ნაგულისხმევი = null
  • წელი - პოსტის წელი. ნაგულისხმევი = null
  • taxonomy_operator — ოპერატორი ტაქსონომიის პირობების შედარებისთვის (IN/NOT IN). ნაგულისხმევი = 'IN'
  • meta_key - მორგებული ველის გასაღები (სახელი). ნაგულისხმევი = null
  • meta_value - მორგებული ველის მნიშვნელობა. ნაგულისხმევი = null
  • meta_compare — ოპერატორი meta_key და meta_value შედარებისთვის. ნაგულისხმევი = 'IN'
  • meta_type - მორგებული ველის ტიპი. ნაგულისხმევი = 'CHAR'
  • meta_relation — გამოიყენება მრავალი მორგებული ველის ჩანაწერით (AND/OR). ნაგულისხმევი = 'და'
  • ავტორი – მძიმით გამოყოფილი ავტორების სია ID-ით. ნაგულისხმევი = null
  • post__in — მძიმით გამოყოფილი პოსტის ID-ების სია, რომლებიც შედის მოთხოვნაში. ნაგულისხმევი = null
  • post__not_in — მძიმით გამოყოფილი სია პოსტის ID-ების გამორიცხვის მოთხოვნიდან. ნაგულისხმევი = null
  • ძიება - შეკითხვის საძიებო ტერმინი ('s'). ნაგულისხმევი = null
  • custom_args - მნიშვნელობის:წყვილი არგუმენტების სია გამოყოფილია მძიმით. მაგალითად. tag_slug__and: დიზაინი, განვითარება; event_display:მოახლოებული. ნაგულისხმევი = null
  • post_status - აირჩიეთ პოსტის სტატუსი. ნაგულისხმევი = 'გამოქვეყნება'
  • შეკვეთა — აჩვენეთ პოსტები ASC (აღმავალი) ან DESC (კლებადობით) თანმიმდევრობით. ნაგულისხმევი = 'DESC'
  • orderby — შეუკვეთეთ პოსტები თარიღის, სათაურის, სახელის, მენიუს თანმიმდევრობის, ავტორის, პოსტის ID ან კომენტარების მიხედვით. ნაგულისხმევი = 'თარიღი'
  • offset - საწყის მოთხოვნის (ნომრის) გადატვირთვა. ნაგულისხმევი = '0'
  • posts_per_page — უამრავი ინფორმაცია დატვირთვის შესახებ Ajax-ის თითოეული მოთხოვნით. ნაგულისხმევი = '5'
  • გადახვევა — ჩატვირთეთ მეტი პოსტი, როდესაც მომხმარებელი გადახვევს გვერდს (true/false). ნაგულისხმევი = 'ჭეშმარიტი'
  • გადახვევის_დისტანცია — დადექით თაღის წინ კიდემდე, რათა გამოიწვიოთ პოსტების ჩატვირთვა გადახვევისას. ნაგულისხმევი = '150'
  • scroll_container — შეზღუდოს Ajax Load მეტი უსასრულო გადახვევა მშობელ კონტეინერზე. ნაგულისხმევი = null
  • max_pages — გვერდების მაქსიმალური რაოდენობა, რომელიც ჩაიტვირთება მომხმარებლის გადახვევისას (გააქტიურებულია გადახვევისას = true). ნაგულისხმევი = '0'
  • pause_override — ნება მიეცით გადახვევას გადააჭარბოს პაუზის პარამეტრს და გამოიწვიოს პოსტების ჩატვირთვა გადახვევაზე. ნაგულისხმევი = null
  • პაუზა — არ ჩატვირთოთ პოსტები, სანამ მომხმარებელი არ დააჭერს Load More ღილაკს (true/false). ნაგულისხმევი = 'ცრუ'
  • გარდამავალი - აირჩიეთ პოსტების გამოვლენა გარდამავალზე (გაქრება/ქვისა/არცერთი). ნაგულისხმევი = 'გაქრება'
  • transition_container - Ajax Load More (.alm-reveal) ჩატვირთვის კონტეინერის ჩვენება. ნაგულისხმევი = 'ჭეშმარიტი'
  • transition_container_classes — კლასების დამატება .alm-reveal transition div.
  • masonry_selector - თითოეული ქვისა ელემენტის სამიზნე კლასის სახელი. ნაგულისხმევი = null
  • masonry_animation — აირჩიეთ ჩატვირთვის გადასვლის ტიპი ქვის ნივთებისთვის. (ნაგულისხმევი/დაპატარავება/სლაიდი მაღლა/დაწევა/არცერთი). ნაგულისხმევი = ნაგულისხმევი
  • masonry_horizontalorder - ჰორიზონტალური წესრიგის შენარჩუნება. ნაგულისხმევი=true
  • images_loaded — დაამარცხეთ ყველა სურათი, რომ დაამატოთ მნიშვნელობა ajax-ის დატვირთულ კონტენტზე (true/false). ნაგულისხმევი = 'ცრუ'
  • destroy_after — წაშალეთ ajax load-ის მეტი ფუნქციონალობა მას შემდეგ, რაც ჩაიტვირთება 'n' გვერდების რაოდენობა. ნაგულისხმევი = null
  • progress_bar — აჩვენეთ პროგრესის ზოლის ინდიკატორი ფანჯრის ზედა ნაწილში, როდესაც ჩართულია Ajax შინაარსი. ნაგულისხმევი = 'ცრუ'
  • progress_bar_color - შეიყვანეთ პროგრესის ზოლის ექვსკუთხა ფერი. ნაგულისხმევი = 'ed7070'
  • button_label — განცხადების ტექსტი Load More ღილაკისთვის. ნაგულისხმევი = 'ძველი პოსტები'
  • — განაახლეთ Load More ღილაკის ტექსტი, სანამ შინაარსი იტვირთება. ნაგულისხმევი = null
  • container_type — აირჩიეთ გლობალური კონტეინერის ტიპი, რომელიც დაინსტალირებულია ALM პარამეტრების გვერდზე. ნაგულისხმევი = null
  • css_classes — დაამატეთ მორგებული CSS კლასები Ajax Load More კონტეინერში. ნაგულისხმევი = null
  • id — უნიკალური ID Ajax Load More მაგალითად.
  • წყობილი - ეს არის წყობილი Ajax Load More მაგალითი. ნაგულისხმევი = მცდარი
მაგალითი Ajax Load More Shortcode Example Demos
  • ნაგულისხმევი — ფუნქციონალურობა და სტილი არ არის.
  • Advanced Custom Fields - ინდივიდუალური გადახვევა Advanced Custom Fields მონაცემები Ajax Load More-ით.
  • დანართები - გაუთავებელი გადახვევის პოსტის დანართები.
  • Destroy After — ამოიღეთ Ajax Load მეტი ფუნქციონალობა გვერდების "n" რაოდენობის შემდეგ.
  • მოვლენების ჩამონათვალი — მოვლენების შეკვეთა და ჩამოთვლა მორგებული ველის თარიღის მიხედვით.
  • ფილტრაცია — გადატვირთეთ და გაფილტრეთ Ajax Load More მაგალითად.
  • Flexbox - საპასუხო Ajax Load More ბადის შექმნა Flexbox-ით.
  • უსასრულო გადახვევა - გადახედეთ ახალი ჩატვირთვის ფუნქციებს და სტილებს.
  • Images Loaded — ჩატვირთეთ სურათი ajax დატვირთული შინაარსის ჩვენებამდე.
  • ქვისა - მოქნილი ბადის განლაგება Masonry JS-ით.
  • მრავალჯერადი შემთხვევა - ჩართეთ მრავალი Ajax Load More' ერთ გვერდზე.
  • პეიჯინგის URL-ები — შექმენით უნიკალური პეიჯინგის URL-ები ყოველი Ajax Load More მოთხოვნაზე SEO დანამატით.
  • — პოსტები არ იტვირთება მომხმარებლის მიერ ინიცირებამდე.
  • წინასწარ ჩატვირთული შეტყობინებები — ადვილად წინასწარ ჩატვირთეთ შეტყობინებების საწყისი ნაკრები Ajax-ის ყველა მოთხოვნისთვის სერვერზე.
  • პროგრესის ზოლი — აჩვენეთ პროგრესის ზოლის დატვირთვის ინდიკატორი Ajax-ის თითოეული მოთხოვნით.
  • ძიების შედეგები — შედეგების დაბრუნება საძიებო ტერმინებზე დაყრდნობით.
  • Scroll Container - შეზღუდეთ Ajax Load მეტი მშობლის კონტეინერამდე.
  • SEO და პეიჯინგი – შეუთავსეთ ეს ორი დანამატი ერთი ძლიერი სანავიგაციო სისტემის შესაქმნელად.
  • სლაიდშოუს გალერეა — შექმენით პოსტების გალერეა Ajax Load More და პეიჯინგის დანამატით.
  • ცხრილის განლაგება - Ajax Load More აჩვენებს შედეგებს ცხრილის ფორმატში.

როგორც უკვე მიხვდით, დღეს WordPress-ზე გადახვევისას ახალი ჩანაწერების მუდმივი ზრდაა. ნავიგაციის ნაცვლად, ჩანაწერები ავტომატურად გამოჩნდება გადახვევის დროს. შესაძლებელია ახალი ჩანაწერების დამატება ხელახალი ატვირთვის გარეშე AJAX-ის გამოყენებით. ჩვენ შეგვიძლია გავაკეთოთ ეს ყველაფერი, ყოველგვარი დანამატის გამოყენების გარეშე.

ახლა მე გაჩვენებთ ასეთი გაუმჯობესების ორ გზას. არსებითად, ეს არის იგივე მეთოდი, უბრალოდ ცოტა განსხვავებული ძალაუფლებით. ოფციები გააქტიურდება ავტომატურად გადახვევისას ან ღილაკზე დაჭერისას, მაგალითად - მეტის ჩვენება. რაც უფრო შესაფერისია თქვენი საიტისთვის, თქვენზეა დამოკიდებული.

ავტომატურად ზრდის ჩანაწერებს Krok 1-ის გადახვევის საათის მიხედვით

დასაწყისისთვის, თქვენ უნდა იცოდეთ, გსურთ თუ არა ავტომატური წინსვლის დანერგვა. ყველაზე ხშირად, თქვენ უნდა დააინსტალიროთ მალსახმობი, რათა ამოიღოთ ციკლი უკანა ნავიგაციიდან. მაგალითად, content.php ფაილი უფრო მცირეა. ასე რომ თქვენ შეგიძლიათ იგივე გააკეთოთ - index.php, archive.php, loop.php, category.php, search.php და ა.შ. ამ ფაილებს შეიძლება ჰქონდეს სტანდარტული WordPress ნავიგაცია ან მორგებული ფუნქცია. გამოიყენეთ იგი სტატისტიკაში.

ასე რომ, რაც თქვენ გაქვთ ამის მსგავსი, ის თავისთავად წყდება ციკლის ბოლოს. შეცვალეთ ახალი სიმღერა შემდეგი კოდით.

var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = ""; var მიმდინარე_გვერდი =; var max_pages = "";

კოდის ზედა ნაწილს არ სჭირდება გაკაწრა, ხოლო ქვედა ღერძი პასუხისმგებელია ანიმაციაზე მიზიდულობის საათის განმავლობაში. თქვენ არ გჭირდებათ უბრალოდ წაშალოთ ყველაფერი ბლოკის შუაში - load_more_gs, არამედ შეცვალოთ ყველაფერი ბლოკის შუაში, არა თავად load_more_gs, არამედ მის ნაცვლად თქვენი კოდით და გექნებათ თქვენი საკუთარი ანიმაცია.

UPD. ვინაიდან დაწინაურების შემდეგ, უკეთესი იქნება იმუშაოთ კატეგორიის მხარეს, ვიდრე ძიების მხარეს, შეგიძლიათ სცადოთ კოდის მე-4 რიგის შეცვლა ახალი ორით:

// ჩაანაცვლეთ ეს var true_posts = ""; // Tse $str = serialize($wp_query->query_vars); var true_posts = "";

Croc 2

ახლა ჩვენ დავამატებთ სტილებს ჩვენი ანიმაციისთვის. თუ ეს უკვე გინახავთ, შეგიძლიათ გამოტოვოთ ეს წერტილი.

#load_more_gs( სიგანე: 53px; padding:50px 0; ზღვარი:0 ავტომატური; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::fore, .cssload-whirlpool: აბსოლუტური ზედა: 50%; მარცხენა: 50%; საზღვარი: 1px მყარი rgb(255,255,255); საზღვარი-მარცხენა-ფერი: rgb(0,225,255); საზღვარი-რადიუსი: 974 პიქსელი; -საზღვარი-რადიუსი: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms linear infinite;-o-animation: cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; როტაცია 1150ms წრფივი უსასრულო; ) .cssload-whirlpool::before ( შინაარსი: ""; ზღვარი: -22px 0 0 -22px; cssload-rotate 1150ms წრფივი უსასრულო; -ms-ანიმაცია: cssload-rotate 1150ms linear infinite; -webkit-crotate-animation 1150 ms წრფივი უსასრულო; -moz-ანიმაცია: cssload-rotate 1150ms linear infinite; ) .cssload-whirlpool::after ( content: ""; ზღვარი: -28px 0 0 -28px; სიმაღლე: 55px; სიგანე: 55pxs; -როტაცია 2300ms წრფივი უსასრულო; უსასრულო;-ms-ანიმაცია: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-ანიმაცია: cssload-rotate infinite 2300ms; ) @-o-keyframes cssload-rotate ( 100% ( -o-transform: rotate(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: rotate( 360deg); ) ) @ -webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: rotate(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: rotate(360deg) ;) )

Croc 3

ახლა ჩვენ გვჭირდება ასინქრონული ანიმაციის სკრიპტი. აქ ორი მიმართულებაა. ან ჩადეთ სკრიპტი თქვენს ქვედა კოლონტიტში, ჩასვით ტეგებში:

//აქ არის სცენარი

ან შექმენით ფაილი, მაგალითად - moreload.js, დაამატეთ ახალი სკრიპტი და შემდეგ დააკავშირეთ ის ქვედა კოლონტიტულით, მიუთითეთ სწორი გზა, ასე: