გვერდის თანდათანობითი ჩატვირთვა jquery-ში. უსასრულო გადახვევის გაუმჯობესება. მიმდინარეობს გარე მონაცემების ჩატვირთვა

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

უპირატესობები და უარყოფითი მხარეები

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

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

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

მოდი დავიწყოთ

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

HTML

გამარჯობა! მე ვარ პირველი ელემენტი გამარჯობა! მე ვარ მეორე ელემენტი გამარჯობა! მე მესამე ელემენტი ვარ, ასე რომ, ეს უკვე მოსაწყენი ხდება... მოდით ვცადოთ რაღაც ახალი. როგორ შეგიძლიათ მეტი ელემენტების ჩატვირთვა AJAX-ის საშუალებით დააწკაპუნეთ ქვემოთ მოცემულ ღილაკს ატვირთვისთვის მეტი ელემენტი loading ჯერ კიდევ იტვირთება დამატებითი ელემენტები

CSS

#data-container ( margin: 10px; ) #data-container .data-item ( background-color: #444444; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5 px; სიგანე: 200 პიქსელი; სიმაღლე: 50 პიქსელი;

ძირითადი შენიშვნები

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

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

AJAX რეაგირების შაბლონები

იდეალურ შემთხვევაში, ჩვენ უნდა გამოვაცხადოთ ცვლადი, რომელშიც შევინახავთ გვერდის ნომერს და გამოვიყენოთ ეს ნომერი, რათა განვსაზღვროთ URL, რომელზეც გამოგიგზავნით მოთხოვნას. ჩვენს დემოში გვექნება სამი ასეთი გვერდი: 2.html, 3.html და ცარიელი გვერდი 4.html.

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

მიღებული მონაცემების დამატება გვერდზე

პირველ რიგში, დავუბრუნდეთ ჩვენს მიერ განხორციელებულ ცვლილებებს, როდესაც მოთხოვნა ჯერ კიდევ გაშვებული იყო, ანუ ვაჩვენოთ ღილაკი „დატვირთეთ მეტი“ და დავმალოთ საინფორმაციო ტექსტი. მეორეც, თქვენ უნდა ჩაწეროთ მიღებული მონაცემები გვერდზე, იმ ელემენტების შემდეგ, რომლებიც უკვე გვერდზეა. გაითვალისწინეთ, რომ ამ მაგალითში სიმარტივისთვის ვიღებთ HTML მონაცემებიდაუყოვნებლივ მოთხოვნის შედეგად. შეგიძლიათ გამოაგზავნოთ პასუხი JSON ფორმატი, მასში დამატებითი ცვლადების დამატება, როგორიცაა სტატუსი ან შეტყობინება. მონაცემთა სიჩქარის კოდი ნაჩვენებია ქვემოთ:

$(buttonId).ჩვენება(); $(loadingId).დამალვა(); $(response).appendTo($(container)); გვერდი += 1;

პარამეტრის დამუშავება, როდესაც მონაცემები ამოიწურება

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

$.ajax(( ... წარმატება: ფუნქცია(პასუხი) ( // მოქმედება, თუ პასუხი ცარიელია, თუ (response.trim() == "") ( $(buttonId).fadeOut(); $(loadingId).ტექსტი ("აღარ ჩასატვირთი!" // თუ პასუხი სწორია) );

დასკვნა

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

$.each(response.item, ფუნქცია (ინდექსი, მნიშვნელობა) ($("", ("კლასი" : "მონაცემთა ელემენტი", "ტექსტი": მნიშვნელობა)); ));

და ბოლოს, JSON პასუხი შეიძლება შეიცავდეს შეტყობინებას, რომელიც მიუთითებს, იყო თუ არა მოთხოვნა წარმატებული; მონაცემები; ასევე ინფორმაცია იმის შესახებ, არის თუ არა მეტი პოსტი ჩამოსატვირთად. IN ამ შემთხვევაშიუფრო მეტია ეფექტური გზაშედეგის გაგზავნა.

Sandbox

დაკომპლექტება 2013 წლის 9 თებერვალს, საღამოს 9:42 საათზე, მთლიანად დამტრიალეთ. საპასუხო განლაგება უსასრულო გადახვევით

• კარადა *

ცოტა ხნის წინ წავაწყდი პრობლემას:
- განლაგება ადაპტური განლაგება. ფანჯრის ზომის შეცვლისას, გვერდზე არსებული ელემენტები მასშტაბირებულია გარკვეულ სიგანეზე. თუ სიგანე მინიმალურზე ნაკლებია, მწკრივში ელემენტების რაოდენობა მცირდება და ამავდროულად ავსებს მთელ ეკრანს სიგანეში. მნიშვნელობა გასაგებია - გვერდი უნდა ნახოთ ნებისმიერ მონიტორზე, მათ შორის. მობილურ მოწყობილობებზე.
- კონტენტი იტვირთება გვერდის გადახვევისას, ასე რომ, კონტენტის მხოლოდ ნაწილი გამოჩნდება, დანარჩენი იტვირთება ქვემოთ გადახვევისას (VK კედლის ანალოგი).
- გვერდზე ელემენტების გამოჩენა თავის მხრივ ხდება, თითოეული ელემენტის გამჭვირვალობის გლუვი ზრდით. მას შემდეგ, რაც პირველი ელემენტი გაუმჭვირვალე გახდება, ეფექტი გამოიყენება შემდეგი ელემენტი... და ასე შემდეგ ყველასთვის.

მზა გამოსავალი ვერ ვიპოვე, ყველაფერი თავიდან უნდა დამეწერა. შესაძლოა მთელი ეს ფუნქცია გამოუსადეგარია, მაგრამ თუ მოულოდნელად ვინმეს გამოადგება, გამოიყენეთ, გამოსცადეთ, ისიამოვნეთ:

HTML. ტესტირებისთვის, მე სწრაფად შევადგინე ძალიან მარტივი განლაგება. იმისთვის, რომ სტილები დიდხანს არ შევიწუხო, ჩამტვირთავი დავაკავშირე. აქ არის მარკირება:
გამარჯობა მსოფლიო! // პრინციპში, კლასის ინიციალიზაცია შეგიძლიათ არა აქ, და პარამეტრების გარეშე. ამის შესახებ უფრო მოგვიანებით.// კონტეინერი, სადაც ნაჩვენებია ყველა ელემენტი. // ჩვენს შემთხვევაში, თითოეული ელემენტი არის

ცალკე ელემენტი
გვერდზე. ჩვენ ბევრ მათგანს გამოვიყვანთ.

// ... ბევრი, ბევრი ნივთი // ვაკეთებთ დასუფთავებას, იმიტომ ჩვენს ელემენტს აქვს float:left
CSS. აქ ყველაფერი უბრალოდ აღმაშფოთებელია. დააკავშირეთ ჩამტვირთავი, დააყენეთ შინაარსის რამდენიმე სტილი - და წადით! @import url ("bootstrap.css"); სხეული ( ფონი: #000; ) სექცია.კონტეინერი ( პოზიცია: აბსოლუტური; ზევით: 50 პიქსელი; ქვედა: 50 პიქსელი; სიგანე: 100%; გადინება: ავტო;) მონაკვეთი. კონტეინერი > მონაკვეთი. ელემენტი ( პოზიცია: შედარებითი; float: მარცხნივ; ზღვარი: 0, სიმაღლე: 140 პიქსელი: დამალული;) სექცია. კონტეინერი > img (სიგანე: 100%); JS. სწორედ აქ ხდება ის საინტერესო. თავიდან ფუნქციები ცალკე დავწერე, მერე, როცა ყველაფერი მუშაობდა, ერთ კლასში გავაერთიანე თამაშის მეთოდი() გადის // ყველა სურათს დამალული კლასით (თავდაპირველად ყველას აქვს ერთი), // fadeIn() ეფექტის გამოყენების შემდეგ, კლასს წაშლის. ამრიგად, ახალი შინაარსის ჩატვირთვისას, ციკლი იწყება // არა პირველი ელემენტიდან, არამედ პირველი დატვირთულიდან. // პირველად შევხვდი queue() მეთოდის გამოყენებით. თამაში: ფუნქცია() ( var _self = ეს; var ელემენტი = $(_self.container).find(_self.img); $(items).each(function(i) ( var cur = $(this). დამალვა( $(დოკუმენტი). რიგ ("myQueue", ფუნქცია(n) (cur.removeClass("დამალული").fadeIn(_self.interval, n); )); ; ), // რეალურად იტვირთება შინაარსი. აქ ყველაფერი მარტივია: ჩვენ ვუგზავნით მოთხოვნას სერვერზე - ვიღებთ // ახალ შინაარსს გვერდზე (თუ არის) და ვაჩვენებთ მას მშობელი ბლოკის დატვირთვის ბოლოს: ფუნქცია() ( var _self = this; $.ajax(( url: "/load .php", ტიპი: "POST", data: ("count": _self.count), dataType: "json", წარმატება: function(json) (if(json .output) ($(_self.container).children ("div.clearfix").before(json.output); _self.adjust(); ) )); თუვერტიკალური გადახვევა

მშობელ ბლოკში // უდრის მაქსიმუმს - ვაგზავნით მოთხოვნას ახალი შინაარსის შესახებ. // ამგვარად, კონტენტის ჩატვირთვა განხორციელდება მხოლოდ იმ შემთხვევაში, თუ ჩვენ // გადავხვევთ გვერდს ბოლომდე.
checkScroll: ფუნქცია() ( var _self = ეს; var scrollH = $(_self.container).prop("scrollHeight"); var scrollT = $(_self.container).prop("scrollTop"); var scrollS = $( _self.container).prop("scrollTop") + $(_self.container).height(if(scrollS == scrollH) ( _self.load(); ) )< $items_on_page; $i++) { $html .= "PHP. აქ ყველაფერი პრიმიტიულია, მხოლოდ შესამოწმებლად.
$json = მასივი(); $html = ""; $items_on_page = !ცარიელი($_POST["count"])? (int)$_POST["count"]: 5; for($i = 0; $i
"; ) $json["გამომავალი"] = $html; echo json_encode($json);

აქ მხოლოდ ერთი პარამეტრი გადაეცემა $_POST-ს (დასამატებელი ბლოკების რაოდენობა), მაგრამ თქვენ შეგიძლიათ დამატებით გაიაროთ საწყისი წერტილი, პაგინაციის პრინციპის გამოყენებით. მისი მიღება შესაძლებელია JS-ში შემდეგი გამოყენებით:

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

უპირატესობები და უარყოფითი მხარეები

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

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

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

მოდი დავიწყოთ

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

HTML

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

CSS

#data-container ( margin: 10px; ) #data-container .data-item ( background-color: #444444; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5 px; სიგანე: 200 პიქსელი; სიმაღლე: 50 პიქსელი;

ძირითადი შენიშვნები

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

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

AJAX რეაგირების შაბლონები

იდეალურ შემთხვევაში, ჩვენ უნდა გამოვაცხადოთ ცვლადი, რომელშიც შევინახავთ გვერდის ნომერს და გამოვიყენოთ ეს ნომერი, რათა განვსაზღვროთ URL, რომელზეც გამოგიგზავნით მოთხოვნას. ჩვენს დემოში გვექნება სამი ასეთი გვერდი: 2.html, 3.html და ცარიელი გვერდი 4.html.

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

მიღებული მონაცემების დამატება გვერდზე

პირველ რიგში, დავუბრუნდეთ ჩვენს მიერ განხორციელებულ ცვლილებებს, როდესაც მოთხოვნა ჯერ კიდევ გაშვებული იყო, ანუ ვაჩვენოთ ღილაკი „დატვირთეთ მეტი“ და დავმალოთ საინფორმაციო ტექსტი. მეორეც, თქვენ უნდა ჩაწეროთ მიღებული მონაცემები გვერდზე, იმ ელემენტების შემდეგ, რომლებიც უკვე გვერდზეა. გაითვალისწინეთ, რომ სიმარტივისთვის, ამ მაგალითში ჩვენ ვიღებთ HTML მონაცემებს დაუყოვნებლივ მოთხოვნის შედეგად. თქვენ შეგიძლიათ გამოაგზავნოთ პასუხი JSON ფორმატში, დაამატეთ მას დამატებითი ცვლადები, როგორიცაა სტატუსი ან შეტყობინება. მონაცემთა სიჩქარის კოდი ნაჩვენებია ქვემოთ:

$(buttonId).ჩვენება(); $(loadingId).დამალვა(); $(response).appendTo($(container)); გვერდი += 1;

პარამეტრის დამუშავება, როდესაც მონაცემები ამოიწურება

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

$.ajax(( ... წარმატება: ფუნქცია(პასუხი) ( // მოქმედება, თუ პასუხი ცარიელია, თუ (response.trim() == "") ( $(buttonId).fadeOut(); $(loadingId).ტექსტი ("აღარ ჩასატვირთი!" // თუ პასუხი სწორია) );

დასკვნა

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

$.each(response.item, ფუნქცია (ინდექსი, მნიშვნელობა) ($("", ("კლასი" : "მონაცემთა ელემენტი", "ტექსტი": მნიშვნელობა)); ));

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

დიდი ხანია, რაც არ გამოვაქვეყნე რაიმე კოდი. დღეს მე გამოვასწორებ სიტუაციას და მოგცემთ რამდენიმე სასარგებლო jQuery სნიპეტს, რომელიც აუცილებლად გამოგადგებათ თქვენს ვებსაიტებზე.

მე არ შევალ თეორიაში; უბრალოდ შეგახსენებთ რა არის jQuery.

jQuery არის JavaScript ბიბლიოთეკა, ფოკუსირება JavaScript ურთიერთქმედებადა HTML. jQuery ბიბლიოთეკა დაგეხმარებათ მარტივად შეხვიდეთ ნებისმიერ DOM ელემენტზე, წვდომა ატრიბუტებსა და შინაარსზე DOM ელემენტებიმანიპულირება მათ. ასევე jQuery ბიბლიოთეკაუზრუნველყოფს მოსახერხებელ API-ს AJAX-თან მუშაობისთვის.

მაშ, წავიდეთ!

1. გლუვი გადახვევაგვერდის ზევით

არც ერთ ვებსაიტს არ შეუძლია ამის გარეშე. კოდის მხოლოდ 4 ხაზი საშუალებას მისცემს თქვენს ვიზიტორებს შეუფერხებლად გადაახვიონ მთელი გვერდი ერთი დაწკაპუნებით.

$("a").click(function() ($("html, body").animate(( scrollTop: 0 ), "slow"); return false; ));

2. ცხრილის სათაურების დუბლიკატი

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

Var $tfoot = $(""); $($("thead").clone(true, true).children().get().reverse()).each(function())($tfoot.append($(this)); )); $tfoot.insertAfter("მაგიდა");

3. გარე მონაცემების ჩატვირთვა

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

$("#content").load("somefile.html", ფუნქცია(პასუხი, სტატუსი, xhr) ( // შეცდომის დამუშავება if(status == "შეცდომა") ( $("#content").html(" მოხდა შეცდომა: " + xhr.status + " " + xhr.statusText); ) ));

4. სვეტის იგივე სიმაღლე

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

var maxheight = 0; $("div.col").each(function())(if($(this).height() > maxheight) (maxheight = $(this).height(); ) )); $("div.col").სიმაღლე(maxheight); 5. მაგიდის ზებრა

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

$(დოკუმენტი).ready(function())($("table tr: even").addClass("ზოლები"); ));

6. გვერდის ნაწილობრივი განახლება

jQuery-ის გამოყენებით ძალიან მარტივია გვერდის ბლოკის (ნაწილობრივი) განახლება. მაგალითად, ქვემოთ მოცემული კოდი საშუალებას მოგცემთ ავტომატურად განაახლოთ #refresh ბლოკი ყოველ 10 წამში.

SetInterval(function() ($("#refresh").load(location.href+" #refresh>*",""); ), 10000); // მილიწამები ლოდინი

7. სურათების წინასწარ ჩატვირთვა

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

$.preloadImages = ფუნქცია() ( for(var i = 0; i maxWidth)( თანაფარდობა = maxWidth / სიგანე; $(this).css("width", maxWidth); $(this).css("სიმაღლე", სიმაღლე * თანაფარდობა = სიმაღლე * თანაფარდობა ) var width = $(this) ; (this).css("სიმაღლე", maxHeight $(this).css("სიგანე", სიგანე * თანაფარდობა); //$("#contentpage img").ჩვენება(); // სურათის ზომის შეცვლა ));

12. გვერდის ქვემოთ გადახვევისას შინაარსის ჩატვირთვა

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

Var loading = false; $(window).scroll(function())( if((($(window).scrollTop()+$(window).height())+250)>=$(დოკუმენტი).სიმაღლე())(თუ ( loading == false)( loading = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max") val(), ფუნქცია(დატვირთული)($("body").append(ჩატვირთული);$("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none" loading = false ) ); $(დოკუმენტი).ready(function() ($("#loaded_max").val(50); ));

13. სურათის ჩატვირთვის შემოწმება

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

Var imgsrc = "img/image1.png"; $(" ").load(function () ( alert("image loaded"); )).error(function () ( alert("error loading image"); )).attr("src", imgsrc);

14. დახარისხება ანბანურად

თუ სიის დინამიური დახარისხება გჭირდებათ ანბანურად, ეს პატარა ნაწყვეტი აუცილებლად გამოგადგებათ.

$(function() ( $.fn.sortList = ფუნქცია() ( var mylist = $(this); var listitems = $("li", mylist).get(); listitems.sort(function(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

შეინახეთ - ის გამოგადგებათ.

ყველა უახლესი და ყველაზე საინტერესო WordPress-ის სამყაროდან ჩემს Telegram არხზე. გამოიწერეთ!