JQuery - .load()

[pseudonymos]

Καλημέρα σε όλους,

 

στο αρχείο .html σε κάποιο σημείο έχω 20 μικρές φωτογραφίες thumbnails.

Με το που φορτώνει η σελίδα θέλω ( με jquery .width() ) να διαβάζω το μήκος της φωτογραφίας. Όταν φορτώνει η σελίδα και εκτελείται η εντολή ( .width() ) μου επιστρέφει 0 αφού υποθέτω δεν έχει προλάβει γίνει το download των εικόνων.

Οπότε χρησιμοποιώ την εντολή .load() .

Ενώ αυτή η εντολή λειτουργεί κανονικά για μία φωτογραφία όταν την χρησιμοποιώ για πολλές πάλι μου επιστρέφει 0.

Η εντολή είναι

$(".thumbnail").load(function(){ console.log($(this).width()); }) .

 

Ξέρει κανείς γιατί γίνεται αυτό??

Ή πως μπορώ να διαβάσω το μέγεθος των εικόνων με το που φορτώσει η σελίδα ( αφού οι εικόνες θέλουν λίγο παραπάνω χρόνο για να φορτώσουν )??

[defacer]

Το τελευταίο option που αναφέρεις απλά δεν γίνεται, το ξεχνάμε.

 

Όσο για το jQuery load, δεν ξέρω αν διάβασες το documentation:

 

Caveats of the load event when used with images

 

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

 

• 
   
  
• It doesn't work consistently nor reliably cross-browser
  
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
  
• It doesn't correctly bubble up the DOM tree
  
• Can cease to fire for images that already live in the browser's cache
  

 

Προτείνω να σκεφτείς καλύτερα ποιό είναι το αποτέλεσμα που θέλεις να πετύχεις και να βρεις μια τελείως διαφορετική μέθοδο (η οποία σχεδόν πάντα υπάρχει). Στην τελική ο σκοπός σου μάλλον δεν είναι να βρεις το μέγεθος της εικόνας και να το κάνεις console.out.

[zinas]

Αν θες, μπορείς να χρησιμοποιήσεις $(window).load(function () {});

 

Για να γίνει trigger αυτό το event, έχουν φορτώσει όλα τα εξωτερικά αρχεία (άρα και οι εικόνες)

[theomalegan]

$(document).ready(function() {

 

εδώ θα βάλεις τον κώδικά σου

 

}

[zinas]

$(document).ready(function() {

 

εδώ θα βάλεις τον κώδικά σου

 

}

Όχι

 

Αυτό ελέγχει μόνο αν έχει φορτωθεί το DOM και όχι αν έχουν έρθει όλα τα αρχεία και οι εικόνες ώστε να μπορεί να μετρηθεί το width