შესაძლებელია თუ არა გავაკონტროლოთ დოკუმენტში რომელიმე სურათი ბოლომდე ჩამოიტვირთა თუ არა? თურმე შესაძლებელია 
გუშინ ღამე ჩემმა მეგობარმა (ირაკლი კობიაშვილი) მკითხა ამის შესახებ და პირველად დავფიქრდი ამ საკითხზე, არასოდეს არ დამჭირვებია მსგავსი რამის გაკეთება(და არც მომხვედრია თვალში არასოდეს მსგავსი რამ) და არც ვიცოდი თუ img ელემენტს ეს მოვლენა გააჩნდა. არადა w3c – ზე ამ ელემენტის მოვლენების აღწერიდან თუ გადავალთ (intrinsic events) ბმულზე, onload მოვლენა სიაში პირველი წერია, თუმცა img ელემენტზე არაფერი არ არის ნახსენები…
ამ მოვლენის გამოყენება ძალიან მარტივია, მაგალითად: <img src=”somefile.gif” onload=”alert(‘hi’)” />. თუმცა შეიძლება უფრო სასარგებლოდაც გამოვიყენოთ იგი დინამიური გალერეებისა ან დინამიური ჩარტების აწყობის დროს.
სადემონსტრაციოდ ქვემოთ მოყვანილია პატარა მაგალითი:
მაგალითში გამოყენებული JavaScript კოდი:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /** *@param string a string specifying image path */ function loadImage(imageSrc) { //change mouse cursor to waiting mode while image is loading document.body.style.cursor = 'wait'; //retrive img element var img = document.getElementById('the-image'); //asign anonimous function to the event if it is not set if (!img.onload) { img.onload = function() { alert('Loaded'); //ok image has been loaded, change mouse cursor to default document.body.style.cursor = 'pointer'; } } //asign image path to src attribute img.src = imageSrc + '?time=' + (new Date().getTime()); return false; } |
ლინკებზე დაწკაპუნებისას გამოიძახება loadImage ფუნქცია რომელსაც პარამეტრად გადაეცემა სასურველი სურათის მისამართი ხოლო სურათის ჩატვირთვა ხდება img.src = imageSrc + ‘?time=’ + (new Date().getTime()); სტრიქონის მეშვეობით(სურათის მისამართის ბოლოში მიბმული ‘?time=’ + (new Date().getTime()) კოდის გამოიყენება ამ სურათის კეშირების თავიდან ასარიდებლად).
სურათის ბოლომდე ჩამოტვირთვის შემდეგ სრულდება ანონიმური ფუნქცია, რომელიც onload თვისებას მივანიჭეთ წინასწარ, ფუნქცია კი შეტყობინების საშუალებით გვატყობინებს რომ სურათის ჩამოტვირთვა დასრულებულია.
ასევე img ელემენტს გააჩნია complete თვისება რომელის მნიშვნელობაც არის true – ს ტოლი სურათის ჩამოტვირთვის შემდეგ… თუმცა რატომღაც Internet Explorer როგორც ხშირად ხდება სხვანაირად იქცევა და ამ თვისების მნიშვნელობა რატომღაც გამუდმებით არის false – ს ტოლი.
ტეგები: JavaScript
გაიხარე
მაგრა გამომადგა.
ლინკს რომ აწვები ვაქრობ ძველ სურათს და მის მაგივრად ვაჩენ დამალულ div-ში მყოფ loading gif-ს. შემდეგ ვაწყობ ვაწყობ ახალი სურატის მისამარტს და ვალოადებ. რომ მორჩება დალოადებას ამ onload-ს საშუალებით gif-ს ვაქრობ და ვაჩენ ახალ სურათს.
მოკლედ მსვენიერი გამოვიდა, კიდევ ერტხელ დიდი მადლობა.
BTW ეკლიპსში tag insight-ში რატომღაც ეს ევენტი არ არის img ტეგისტვის.
ჯიგრულია
სიმართლე გითხრა არსად არასოდეს არ მომხვედრია <img onload=”" ასეთი რამე თვალში… გუშინ რომ ვილაპარაკეთ გამოსავალი კი გითხარი მაგრამ ეგეთი “იზვრაშენცული” გამოსავალი ვის რად უნდა
გამზადებული ქონია onload ივენთი…
თუ სწორად მივხვდი პრელოადერისთვის შეიძლება გამოყენება არა? რაცხა მეტი ვერაფერი პრაქტიკული დანიშნულება ვერ მოვიგონე…
მარტო პრელოადერი რატომ? შეიძლება სურათის ჩატვირთვის შემდეგ კიდევ დამატებით რაღაცეების გაკეთება იყოს საჭირო მაგალითად სხვა სურათების ჩატვირთვა მაგრამ მხოლოდ იმის მერე რაც ეს სურათი ჩაიტვირთება და ასე შემდეგ.. ზოგადად შეიძლება კარგად გამოყენება
სოსო, მეორედ რომ ვუშვებ იგივე URL-ზე რექუესტს, ქეშიდან მოდის სურათი და სერვერამდე აღარ მიდის. მაგას თავს ვერ ავარიდებ? იმიტომ მინდა რომ ის სურათი დინამიურად დაგენერირებული jFreeChart-ია.
მამენტ რამე fake პარამეტრი რომ გადავცე, მაგალითად მიმდინარე დრო რომელსაც სერვერის მხარეს არ გამოვიყენებ არაფერში, ასე კი სეიძლება რარაც სხვა URL, რაღაც ინდური მეჩვენება ეგრე
იკა, კოდი ყურადღებით წაკითხე?
მაგის თავიდან ასარიდებლად Date ობიექტს ვიყენებ
უიჰ