Ajax-ის ჩატვირთვა და სურათების მასშტაბირება php-ში. რამდენიმე სურათის ჯგუფური ატვირთვა. Precognitive precaching

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

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

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

1. ატვირთეთ თითოეული სურათი ცალკე (Single-Asset)

ეს არის ტექნიკა, რომელიც შეგიძლიათ გამოიყენოთ თქვენი საიტის ნებისმიერ ან ყველა სურათზე, რათა თავიდან აიცილოთ (ან თუნდაც დამალოთ) ძირეული JPG-ების ტრადიციული სტრიქონი-სტრიქონ დატვირთვა. ჩვენ დავიწყებთ თითოეული სურათის div-ში შეფუთვით img_wrapper კლასით:

< div class = "img_wrapper" > < img src = "comicbookguy.jpg" alt = "" / > < / div >

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

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

Img_wrapper (პოზიცია: შედარებითი; padding-top: 75%; overflow: დამალული; ) .img_wrapper img (პოზიცია: აბსოლუტური; ზედა: 0; სიგანე: 100%; გაუმჭვირვალობა: 0; )

img_wrapper( პოზიცია: ნათესავი; padding-top: 75%; გადინება: დამალული; Img_wrapper img ( პოზიცია: აბსოლუტური; ზედა: 0; სიგანე: 100%; გამჭვირვალობა: 0;

DOM-ის თითოეული სურათი აწარმოებს დატვირთვის მოვლენას, როდესაც მისი ყველა მონაცემი იტვირთება სერვერიდან და თავად სურათი გადაყვანილია ბრაუზერის მიერ. ამ მოვლენის აღსაბეჭდად და დასაკავშირებლად დაგვჭირდება JavaScript-ის გამოყენება. დავიწყებ სურათის ტეგზე onload ატრიბუტის დამატებით.

< div > < img src = "comicbookguy.jpg" alt = "" onload = "imgLoaded(this)" / > < / div >

იმ დამწყებთათვის, ვისაც მსგავსი რამ აქამდე არ უნახავს, ​​ამას ეწოდება inline სკრიპტის ატრიბუტი და ის გვაძლევს საშუალებას პირდაპირ JavaScript-ის ფუნქციონალობა მივაკავშიროთ მოვლენებს, რომლებიც გასროლილია. DOM ელემენტები, რომელიც ჰგავს სტილის დამატებას პირდაპირ ელემენტებზე inline-ის გამოყენებით სტილის ატრიბუტი. დაიჯერეთ თუ არა, ეს ინლაინ სკრიპტის ატრიბუტები იყო JavaScript-ის წერის მნიშვნელოვანი ნაწილი ინტერნეტის ადრეულ დღეებში და, როგორც შიდა სტილის, ამ დღეებში აკრიტიკებენ კოდის სისუფთავეს და სემანტიკის აქტივისტებს.

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

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

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

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

Გამოყენებით საკვანძო სიტყვაეს ჩვენ შეგვიძლია გავაგზავნოთ ნედლეული DOM ობიექტისურათები თქვენს JavaScript ფუნქციაროგორც არგუმენტი:

ფუნქცია imgLoaded(img)( var $img = $(img); $img.parent().addClass("ჩატვირთული"); );

ფუნქცია imgLoaded(img) ( var $img = $(img); $img. მშობელი (). addClass ("ჩატვირთული");

ან მარტივი JavaScript-ით:

ფუნქცია imgLoaded(img)( var imgWrapper = img.parentNode; imgWrapper.className += imgWrapper.className ? " loaded" : "ჩატვირთული"; );

ფუნქცია imgLoaded(img) ( var imgWrapper = img. მშობელი კვანძი ; imgWrapper. className += imgWrapper. კლასის სახელი? " loaded" : "დატვირთული" ;

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

Img_wrapper.loaded img (გაუმჭვირვალობა: 1;)

img_wrapper. დატვირთული img ( გამჭვირვალობა: 1;

იმისათვის, რომ პროცესი შეუფერხებლად წარიმართოს, ჩვენ დავამატებთ CSS3 გადასვლებს img-ში და მივაღწევთ „fade in“ ეფექტს ჩვენი სურათის ჩატვირთვისას.

Img_wrapper img(პოზიცია: აბსოლუტური; ზედა: 0; სიგანე: 100%; გაუმჭვირვალობა: 0; -ვებ ნაკრები-გარდამავალი: გამჭვირვალობა 150 ms; -moz-გარდამავალი: გამჭვირვალობა 150 ms; -ms-გარდამავალი: გამჭვირვალობა 150 ms; გარდამავალი: გამჭვირვალობა 150 ms;)

Img_wrapper img ( პოზიცია: აბსოლუტური; ზედა: 0; სიგანე: 100%; გამჭვირვალობა: 0; Webkit-გარდამავალი: გამჭვირვალობა 150ms; Moz - გადასვლა: გამჭვირვალობა 150ms; Ms-გარდამავალი: გამჭვირვალობა 150ms; გადასვლა: გამჭვირვალობა 150ms;

იხილეთ სამუშაო მაგალითი codepen.io-ზე, მათ შორის ალტერნატიული ვერსიაჩატვირთვის სპინერის ეკრანით.

პროგრესული JPG

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

არის თუ არა შემაშფოთებელი ეფექტები, როგორიცაა სპინერების ჩატვირთვა და გაქრობა, ეს პირადი გემოვნების საკითხია, მაგრამ ზოგადად, შეფუთვის div ხრიკი აგვარებს ამ პრობლემებს მინიმალური CSS და JavaScript-ით..

Wrapping div ტექნიკის გამოყენების საუკეთესო რამ არის ის, რომ თქვენ არ უნდა ინერვიულოთ თქვენი სურათების სიმაღლის შეცვლაზე მათი ჩატვირთვისას და არ გჭირდებათ თქვენი მომხმარებლების დაქვემდებარება პიქსელების მახინჯ დაჯგუფებაზე, რაც, ჩემი აზრით, შეიძლება იყოს. მომხმარებლისთვის ისეთივე იმედგაცრუებული, როგორც გაღიზიანებული ნორმალური ჩამოტვირთვა. გარდა ამისა, არაფერი ღირს - სურათის რამდენჯერმე ჩვენების პროცესი რეალურად დამატებით სტრესს აყენებს დაბალი სიმძლავრის მოწყობილობებს. მობილური მოწყობილობები. შემაშფოთებელია თუ არა ეფექტები, როგორიცაა სპინერების ჩატვირთვა და გაქრობა, ეს პირადი გემოვნების საკითხია, მაგრამ ძირითადად, შეფუთვის div ხრიკი აგვარებს ამ პრობლემებს მინიმალური CSS და JavaScript-ით და არ არის საჭირო მომხმარებლისზე დაყრდნობა (CMS სიტუაციაში) შენახვისას. JPG-ები გარკვეული გზით.

2. ჯგუფური ატვირთვა მრავალი სურათი

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

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

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

< div id = "Slideshow" > < img src = "slide_1.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_2.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_3.jpg" alt = "" onload = "slideLoaded(this)" / > < / div >

JavaScript-ში ჩვენ გამოვიყენებთ slideLoaded() ფუნქციას სურათების ჩატვირთვის თვალყურის დევნებისთვის და გავუშვით ჩვენი დანამატი, როცა ის მზად იქნება:

ფუნქცია slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), სულ = $slideWrapper.find("img").სიგრძე, პროცენტიLoaded = null; $img.addClass("ჩაიტვირთა "); var loaded = $slideWrapper.find(".loaded").length; if(ჩატვირთული == ჯამური)(percentLoaded = 100; // PLUGIN-ის ინიციალიზაცია $slideWrapper.easyFader(); ) else ( // თვალის დევნება PROCESS პროცენტი ჩატვირთული = ჩატვირთული / სულ * 100);

ფუნქცია slideLoaded(img) ( var $img = $(img) , $slideWrapper = $img. მშობელი (), სულ = $slideWrapper. პოვნა ("img"). სიგრძე, პროცენტი ჩატვირთული = null ; $img. addClass ("ჩატვირთული"); var loaded = $slideWrapper . find(".ჩატვირთული"). სიგრძე ; თუ (ჩატვირთული == სულ) ( პროცენტი ჩატვირთული = 100 ; // PLUGIN-ის ინიცირება $slideWrapper. easyFader(); ) სხვა ( // თვალყური ადევნეთ პროცესს პროცენტი ჩატვირთული = დატვირთული / სულ * 100 ;

ყოველთვის, როცა მასალას ვტვირთავთ, მასში ჩატვირთულ კლასს ვამატებთ, რათა თვალყური ადევნოთ მის პროგრესს.
ბოლო, თუ ჩვენ დავაყენებთ მოდულის ინიციალიზაციას (in ამ შემთხვევაში jQuery EasyFader) როდესაც ჩატვირთული კლასით სურათების რაოდენობა ტოლია კონტეინერში არსებული სურათების საერთო რაოდენობას. როგორც დამატებითი თვისება, თქვენ შეგიძლიათ დაყოთ დატვირთული ცვლადი მთლიან ცვლადად და გამოიყენოთ იგი მომხმარებლებისთვის პროგრესის ვიზუალიზაციისთვის: ან ჩვენებით პროცენტი, ან მისი გამოყენება პროგრესის ზოლის სიგანის გასაკონტროლებლად ან სხვა მსგავსი რამ.

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

3. სურათების წინასწარ ქეშირება სიჩქარისთვის

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

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

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]

var heroArray = [ "/uploads/hero_about.jpg" , "/uploads/hero_history.jpg" , "/uploads/hero_contact.jpg" , "/uploads/hero_services.jpg"

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

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

ფუნქცია preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; )); $(ფანჯარა).load(function())( preCacheHeros(); ));

ფუნქცია preCacheHeros() ( $. თითოეული(heroArray, ფუნქცია()( var img = ახალი სურათი(); img. src = ეს ; } ) ; $ (ფანჯარა). დატვირთვა(ფუნქცია()( preCacheHeros(); } ) ;

ან მარტივი JavaScript-ით:

ფუნქცია preCacheHeros())( for(i = 0; i< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

ფუნქცია preCacheHeros() ( ამისთვის (i = 0; i< heroArray . length ; i ++ ) { var url = heroArray[i], img = ახალი სურათი (); img. src = url ; ფანჯარა. onload = preCacheHeros () ;

მარყუჟის გამოყენებით, ჩვენ ვიმეორებთ heroArray-ის მეშვეობით, ვქმნით ცარიელ გამოსახულების ობიექტს ყოველი გამეორებით და შემდეგ ვაყენებთ URL-ს ჩვენი სურათის src ატრიბუტზე. ეს ატვირთავს სურათს ბრაუზერის ქეშში მიმდინარე სესიისთვის, ასე რომ, როდესაც მომხმარებელი რეალურად ეწვევა იმ გვერდს, რომელზეც სურათი არის წარმოდგენილი, ის მყისიერად გამოჩნდება.

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

აზრი აქვს თქვენი საიტის ანალიტიკის გათვალისწინებას წინასწარი ქეშირების განხორციელებამდე

Precognitive precaching

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

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

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

შეიძლება ცოტა ფანტასტიურად ჟღერდეს, მაგრამ გაგიკვირდებათ, რამდენად ზუსტად შეგიძლიათ იწინასწარმეტყველოთ ვიზიტორების ნაკადი

4. სურათების ზარმაცი დატვირთვა სერვერის დატვირთვის შესამცირებლად

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

ძირითადად გამოიყენება გრძელ ან გამოსახულების მძიმე გვერდებზე. ჩართულია სადესანტო გვერდი Barrel Blog-ში ჩვენ ვუთავსებთ ზარმაცი დატვირთვას MixItUp მოდულს, რათა დავრწმუნდეთ, რომ სურათები, რომლებიც არ არის მიმდინარე ფილტრში ან გვერდზე, ზედმეტად არ იტვირთება, სანამ ეს ელემენტი არ ჩანს. ჩვენ კვლავ გადავახვევთ ნებისმიერ სურათს, რომელიც ექვემდებარება ზარმაცი დატვირთვას div-ში img_wrapper კლასით, რომელიც თავის მხრივ მიენიჭება lazy_load კლასს, რათა ადვილად შევძლოთ მათი შერჩევა jQuery-ის გამოყენებით:

) . დატვირთვა(ფუნქცია()(

lazyLoad();

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

გადადით სურათების ატვირთვამდე

ამ რამდენიმე ტექნიკის ექსპერიმენტებისას სხვადასხვა პროექტზე ბოლო 12 თვის განმავლობაში, მე მომიწია მათი შემცირება და დახვეწა, რათა გამომეყენებინა ახლახან გადაკეთებულ barrelny.com პროექტში (ქვეყნად გამოვიდა აპრილში). სადაც გამოვიყენე ოთხივე ტექნიკის ერთობლიობა, რათა უზრუნველვყო სურათების მოხდენილად ჩატვირთვა, როდესაც ვცდილობდი, გამომეგდო ყოველი უნცია პერფორმანსი უკიდურესად ფოტო და გამოსახულების მქონე ვებსაიტიდან. წინასწარი ქეშირებისა და ზარმაცი ჩატვირთვის AJAX გვერდის ჩატვირთვასთან, სლაიდშოუებთან და კლიენტის მხარეს პაგინაციასთან კომბინაციით, ჩვენ შევძელით შეგვექმნა შესანიშნავი გლუვი შეგრძნება მთელ საიტზე.

როდესაც ვცდილობდი ამ ტექნიკის გამოხდას Barrel-ის შემმუშავებელი გუნდის პრეზენტაციისთვის, სასიამოვნოდ გამიკვირდა, რამდენად მსუბუქია ეს ტექნიკა ქაღალდზე - ჩვეულებრივ 5-10 სტრიქონი კოდი jQuery-ში - და რამდენად ადვილია მათი დანერგვა ნებისმიერ პროექტში. გარდა ამისა, თითოეული მათგანის დაწერა შესაძლებელია მარტივი JavaScript-ის გამოყენებით ზედმეტი უსიამოვნებისა და დამატებითი კოდი, მაგრამ თუ იყენებთ jQuery-ს, როგორც ამას ჩვენ ხშირად ვაკეთებთ, აუცილებლად უნდა ისარგებლოთ მისი ძლიერი DOM-ის გავლის ტექნიკით.

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

ფაილების ან სურათების სერვერზე ატვირთვა საკმაოდ რთულია ტიპიური დავალება. მაგრამ პროგრესი არ დგას და ამიტომ ახლა, რა თქმა უნდა, მსურს ფაილების ჩამოტვირთვა ფონი. როგორც წესი, ადრე ეს შეიძლება განხორციელდეს ფლეშ ან iframe ტექნოლოგიის გამოყენებით. ასევე, ბევრი ადამიანი იყენებს დანამატებს, როგორიცაა jQuery Form Plugin ან Ajax ფაილიატვირთეთ მოდული ან მრავალი ფაილის ატვირთვის დანამატი და სხვათა ზღვა. FormData ობიექტის მოსვლასთან ერთად ყველაფერი გაცილებით მარტივი გახდა. FormData() გაძლევთ საშუალებას შეადგინოთ მონაცემთა ნაკრები სერვერზე გასაგზავნად XMLHttpRequest-ის გამოყენებით.

შევეცადოთ დავწეროთ ჩვენი საკუთარი კოდი ყოველგვარი დანამატების გარეშე (რა თქმა უნდა, გარდა jQuery ფრეიმერისა) ფონზე ატვირთოთ სურათები ან ფაილები სერვერზე. ზოგადად, ჩვენი მოქმედებების ალგორითმი დაახლოებით ასეთი იქნება: შეავსეთ ფორმის ველები მონაცემებით. ველები შეიძლება იყოს ნებისმიერი, ტექსტი, ტექსტური არე, არჩევა და ფაილები. ფაილების არჩევისას, ჩვენი jQuery კოდის წყალობით, ეს ფაილები ფონზე ჩამოიტვირთება სერვერის დროებით დირექტორიაში, მაგალითად "tmp". შემდეგი, როდესაც დააჭირეთ ღილაკს ფორმების გაგზავნა, მონაცემები იგზავნება სერვერის სკრიპტზე, რომელიც დაამუშავებს მონაცემებს. წარმოვიდგინოთ, რომ ეს სტატიებია. ჩვენ ჩავწერთ გადაცემულ მონაცემებს მონაცემთა ბაზაში უნიკალური ID-ით. შემდეგი, ჩვენ შევქმნით დირექტორიას "images" დირექტორიაში უნიკალური ნომრით "id" და თუ გვქონდა ფაილები "tmp" საქაღალდეში, ჩვენ დავაკოპირებთ მათ შექმნილ "id" საქაღალდეში და შემდეგ გავასუფთავებთ "tmp". ” საქაღალდე. შეჯამება: სურათებს ვავსებთ tmp-ში ფონად, ფორმის გაგზავნისას მონაცემებს ვწერთ მონაცემთა ბაზაში, გვექნება უნიკალური ნომერიჩანაწერები. ჩვენ ვქმნით საქაღალდეს ამ ნომრით და გადავიტანთ ჩვენს ფაილებს იქ. ყველა. ამ სტატიაში ჩვენ არ განვიხილავთ მონაცემთა ბაზაში ატვირთვას და ფაილების კოპირებას. ვფიქრობ, აქ ყველასთვის რაღაც იქნება. ერთ რამეზე გავამახვილებთ ყურადღებას - ასინქრონული დატვირთვასურათები (ან ფაილები).

ასე რომ, აქ არის ჩვენი html ნაწილი. აქ ყურადღებას მივაქცევთ იმ ფაქტს, რომ გვაქვს GIF ფაილი წინასწარ ჩამტვირთველის სურათთან ერთად (მარყუჟიანი წრე), რომელსაც ჩვენ ვმალავთ სტილებით. ჩვენ ასევე მივანიჭებთ id = ფაილს ფაილის ველს, ხოლო enctype = “multipart/form-data” ფორმას. ფაილის ველის სახელი იქნება ფაილი ე.ი. ასე რომ, ჩვენ შეგვიძლია ვიმუშაოთ მასივთან, რადგან გვაქვს უფლება ატვირთოთ მრავალი ფაილი (მრავალჯერადი ატრიბუტი).

#preloader (ხილვადობა: დამალული;) დაამატეთ ინფორმაცია

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

//upload.php print_r($_FILES);

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

//upload.php ფუნქცია show_dir($dir) // ფუნქცია tmp საქაღალდიდან სურათების საჩვენებლად ($list = scandir($dir); unset($list,$list); foreach ($list როგორც $ფაილი) (echo " "; ) ) foreach ($_FILES როგორც $key => $value) (//გადაიტანეთ ფაილები tmp move_uploaded_file($value["tmp_name"], "tmp/".$value["name"]); ) show_dir( "./tmp/");

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

$(დოკუმენტი).ready(function())($("#preloader").hide();$("#file").bind("change", function())(var data = new FormData() var error = "" jQuery.each($("#file").files, function(i, file) (if(file.name.length);< 1) { error = error + " Файл имеет არასწორი ზომა! "; ) //სახელის სიგრძის შემოწმება if(file.size > 1000000) ( შეცდომა = შეცდომა + "ფაილი" + file.name + " ძალიან დიდია."; ) //ფაილის ზომის შემოწმება if(file.type != "image/png" && file.type != "image/jpg" && !file.type != "image/gif" && file.type != "image/jpeg") ( შეცდომა = შეცდომა + "ფაილი" + ფაილი .name + " არ ემთხვევა png, jpg ან gif" ) //ფაილის ტიპების შემოწმება data.append("file-"+i, file ) if (error != "") ($("#info)"); ).html(შეცდომა);) else ($.ajax(( url: "upload.php", მონაცემები: მონაცემები, ქეში: false, contentType: false, processData: false, type: "POST", beforeSend: function( ) ($("#preloader").ჩვენება(); ), წარმატება: ფუნქცია(მონაცემები)($("#info").html(data); $("#preloader"). hide(); ) ) ) ;)))));

ისე, როგორც ჩანს, ეს ყველაფერია. თუ ვინმეს რამე არ ესმის, ჰკითხეთ. თუ ვინმეს რაიმე დამატება ექნება მეც მოხარული ვიქნები!
რჩევა: თუ თქვენ ჯერ არ გამოგიყენებიათ კოდი ფაილების წასაშლელად ნებისმიერი დირექტორიადან, მაშინ გირჩევთ შეცვალოთ rmdir delete ფუნქცია echo-ზე ტესტისთვის, რათა დარწმუნდეთ, რომ წაიშლება მხოლოდ ის ფაილები, რომელთა წაშლაც გსურთ. Gif-ის წინასწარ ჩამტვირთველების აღება შეიძლება, მაგალითად, ჩემი გაკვეთილიდან როგორ შევქმნათ Gif ანიმაცია. მაგალითები სტატიის ბოლოს.

UPD:

თუ ვინმეს სურს სილამაზის დამატება, მაგალითად, პროგრესის ზოლი, მაშინ ამისთვის დაგვჭირდება კოდის რამდენიმე ხაზის დამატება. IN html შაბლონიჩვენ დავამატებთ სუპერ ელემენტს html5-დან - პროგრესი, ხოლო js კოდში დავამატებთ რამდენიმე ხაზს XMLHttpRequest ობიექტით.
ასე რომ, ჩვენი html დაემატება შემდეგი:

და დავუმატოთ js კოდს:

ფუნქცია progressHandlingFunction(e)( if(e.lengthComputable)($("პროგრესი").attr((მნიშვნელობა:e.loaded,max:e.total)); ) )

Xhr: ფუნქცია() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // ამოწმებს, რომ ატვირთვა ხორციელდება myXhr.upload.addEventListener("პროგრესი",პროგრესიHandlingFunction, false); // ფუნქციის მნიშვნელობებზე გადასვლა) დაბრუნება myXhr;

js კოდის საბოლოო შედეგი:

$(დოკუმენტი).ready(function())( ფუნქცია progressHandlingFunction(e)( if(e.lengthComputable)($("პროგრესი").attr((მნიშვნელობა:e.loaded,max:e.total)); ) ) $("#preloader").დამალვა ("#file").bind("change", function())(var data = new FormData(); var error = ""; jQuery.each(); $("#ფაილი").ფაილები, ფუნქცია(i, ფაილი) (if(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( შეცდომა = შეცდომა + " ფაილი " + file.name + " არის ძალიან დიდი."; ) if(file.type != "image/png" && file.type != "image/jpg" && !file. ტიპი != "image/gif" && file.type != "image/jpeg") ( შეცდომა = შეცდომა + "ფაილი" + file.name + " არ ემთხვევა png, jpg ან gif"; ) data.append( "ფაილი -"+i, ფაილი); )); if (შეცდომა != "") ($("#info").html(შეცდომა);) else ($.ajax(( url: "productUploadImg.php", ტიპი: "POST", xhr: function() ( var myXhr = $.ajaxSettings.xhr(); ) დაბრუნება myXhr ) , მონაცემები: მონაცემები, ქეში: false, contentType: false, processData: false, beforeSend: function() ( $("#preloader").show(); ), წარმატება: function(data)( $( "#info"). )) ))));

ჩვენ განვიხილეთ რამდენიმე ძირითადი მეთოდი მონაცემების მოსაპოვებლად და AJAX მოთხოვნით გადაცემისთვის. ახლა დროა ვისაუბროთ იმაზე, თუ როგორ შეგიძლიათ ჩამოტვირთოთ ფაილები AJAX-ის გამოყენებით. ბოლო დრომდე არ იყო ფაილების ჩამოტვირთვის ამდენი გზა გვერდის გადატვირთვის გარეშე (დამალული iframe, Flash). ისინი დღესაც გამოიყენება, რადგან ჯერ კიდევ არიან მომხმარებლები ბრაუზერების ძველი ვერსიით, რომლებსაც პროგრესი არ შეეხო. მაგრამ ჩვენ არ ვიხსენებთ უკან, ამიტომ ვაგრძელებთ დროს.

განვიხილოთ, ჩემი აზრით, ერთ-ერთი ყველაზე მოსახერხებელი გზებიფაილებთან მუშაობისთვის (და არა მხოლოდ) - FormData ობიექტი. მოდით არსებობდეს ასეთი მარტივი ფორმა მომხმარებლის ავატარის ჩასატვირთად:

HTML ( index.html ფაილი)

ᲡᲠᲣᲚᲘ ᲡᲐᲮᲔᲚᲘ:
ავატარი:

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

jQuery ( script.js ფაილი)

$(function())( $("#my_form").on("submit", ფუნქცია(e)(e.preventDefault(); var $that = $(this), formData = new FormData($that.get ( 0)); contentType: false , // მნიშვნელოვანი - ამოიღეთ ნაგულისხმევი მონაცემთა ფორმატირების პროცესიData: false, // მნიშვნელოვანი - წაშალეთ ნაგულისხმევი სტრიქონების კონვერტაციის მონაცემები: formData, dataType: "json", წარმატება: ფუნქცია(json)( if(json)( $that .replaceWith( json);

(*) გთხოვთ გაითვალისწინოთ, რომ ჩვენ არ გამოვგზავნით ფორმას jQuery ობიექტიდა DOM ელემენტი

PHP დამმუშავებელი ( ფაილის დამმუშავებელი.php)