Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από skeftomilos » 21 Φεβ 2005 04:16

Ξέρουμε ότι η σειρά με την οποία φορτώνονται οι εικόνες μίας web-σελίδας δε βρίσκεται υπό τον έλεγχό μας. Ο browser ζητά τις εικόνες από τον web-server με λίγο-πολύ τυχαία σειρά, και εν πάσει περιπτώσει με κριτήρια προτεραιότητας που δε μπορούμε να καθορίσουμε. Η εικόνα που θα θέλαμε να φορτωθεί πρώτη απ' όλες είναι πιθανό να φορτωθεί τελευταία. Πριν κάμποσο καιρό ένας φίλος με ρώτησε αν ξέρω κάποιο τρόπο ώστε να φορτώνονται πρώτες κάποιες σημαντικές εικόνες της σελίδας του και ύστερα να φορτώνονται οι καθαρά διακοσμητικές. Δεν ήξερα, αλλά εκείνη την εποχή τύχαινε να μαθαίνω JavaScript και μου γεννήθηκαν πολλές ιδέες. Τελικά η απόλυτη λύση δε βρέθηκε, αλλά φτάσαμε πολύ κοντά. Ok, μπορεί να μοιάζει με την ανακάλυψη του τροχού αλλά ... πάντα έχει πλάκα να ανακαλύπτεις τον τροχό, δε έχει?
:)
Κατ' αρχήν εδώ βρίσκεται μία απλή σελίδα με λίγες εικόνες χωρίς JavaScript. Οι εικόνες ξεκινούν να φορτώνονται ταυτόχρονα. Αυτό γίνεται γιατί οι browsers είναι multi-threaded. Μόλις ο browser διαβάσει ένα πλήρες tag <img src="..."> αναθέτει το φόρτωμα της εικόνας σε ένα διαθέσιμο thread, αν υπάρχει. Επομένως αν θέλουμε να ελέγξουμε τη σειρά της φόρτωσης δεν πρέπει τα <img> να έχουν εξαρχής το attribute src ώστε να μην ξεκινήσει αυτόματα η φόρτωση. Θα ορίσουμε εμείς την τιμή του attribute όταν έρθει η ώρα με μία εντολή σαν την παρακάτω:

Κώδικας: Επιλογή όλων

document.images&#91;"someimageID"&#93;.src = "someimageURL.png"
ή ισοδύναμα:

Κώδικας: Επιλογή όλων

document.someimageID.src = "someimageURL.png"
Πότε όμως είναι η κατάλληλη ώρα? Πως θα συντονίσουμε τη διαδικασία? Ευτυχώς το tag <img> διαθέτει το συμβάν onLoad που τρέχει μόλις φορτωθεί η εικόνα του. Αυτό γεννά την πρώτη ιδέα. Θα φορτώσουμε τις εικόνες με τη σειρά, τη μία μετά την άλλη. Στο onLoad της μίας θα ορίζουμε την ιδιότητα src της άλλης. Π.χ.:

Κώδικας: Επιλογή όλων

<img src="Img1.png" onLoad="document.img2.src='Img2.png'">
<img name="img2">
Ένα παράδειγμα εφαρμογής της ιδέας μπορείται να δείτε εδώ. Είναι πολύ ωραίο που λειτουργεί, αλλά τα προβλήματα της μεθόδου είναι παραπάνω από εμφανή. Ο κώδικας είναι εύθραυστος, πολύ δύσκολος στη συντήρηση, πολύ δύσκολος στο debugging και πολύ άχαρος στην όψη. Επιπλέον το φόρτωμα είναι σημαντικά πιο αργό. Μετά την ολοκλήρωση της μίας εικόνας μέχρι την έναρξη της επόμενης μεσολαβεί κενός χρόνος όπου ο browser και ο server ανταλλάσουν διαδικαστικές πληροφορίες. Όσο περισσότερες και μικρότερες είναι οι εικόνες, τόσο περισσότερος ο χαμένος χρόνος. Χμ...
:think:
Λοιπόν, κατ'αρχήν είναι απαραίτητο το filename της εικόνας να βρίσκεται στο δικό του tag και όχι σε κάποιο κομμάτι κώδικα κάπου αλλού στη σελίδα. Και αφού δε μπορούμε να το βάλουμε στο src θα πρέπει να εφεύρουμε ένα custom attribute γι'αυτό το σκοπό. Ας ονομάσουμε το νέο attribute "file". Κατά δεύτερον πρέπει να απαλλαγούμε από το σειριακό φόρτωμα. Θα χωρίσουμε λοιπόν τις εικόνες σε κατηγορίες (πολύ σημαντικές εικόνες, όχι-και-τόσο, διακοσμητικές) έτσι ώστε να φορτώνονται ταυτόχρονα οι εικόνες του ίδιου group. Πώς θα καθορίσουμε όμως το group στο οποίο ανήκει η κάθε εικόνα? Θέλουμε κάτι απλό και εύκολο. Αφού έχουμε ήδη αποφασίσει να φτιάξουμε ένα custom tag, δε χάνουμε τίποτα να ορίσουμε άλλο ένα. Ας το βαφτίσουμε "order". Ο HTML κώδικας θα αποκτήσει την παρακάτω μορφή:

Κώδικας: Επιλογή όλων

<img file="Img1.png" order=1>
<img file="Img2.png" order=1>
<img file="Img3.png" order=3>
<img file="Img4.png" order=2>
<img file="Img5.png" order=2>
Πολύ καλύτερα, συμφωνείτε? Μόνο που - ως συνήθως! - το κόστος της απλοποίησης της HTML πρέπει να πληρωθεί με πολυπλοκότητα στον κώδικα JavaScript. Όμως ο κώδικας αυτός είναι σταθερός, μεταφέρεται από σελίδα σε σελίδα χωρίς καμία αλλαγή. Ακόμα και το χειριστή συμβάντος onLoad του <body> θα μπορούσαμε αν θέλαμε να το μετακινήσουμε μέσα στο <script>. Μία σελίδα που χρησιμοποιεί αυτή τη μέθοδο βρίσκεται εδώ, και φυσικά περιέχει τον κώδικα. Όποιος ενδιαφέρεται ας τον εξετάσει. Δεν είναι τόσο περίπλοκος όσο δείχνει. Τα custom attributes διαβάζονται με τη μέθοδο getAttribute(). Η σελίδα εμφανίζεται σωστά σε όλους τους browsers (Firefox, IE, Opera).

Ωραία! Τι μας λείπει για να είμαστε απόλυτα ευτυχείς? Ουπς! Η JavaScript! Έχουμε καταστήσει τη σελίδα μας εξαρτημένη από την υποστήριξη scripting στον browser. Και ξέρουμε ότι μερικοί χρήστες σερφάρουν χωρίς JavaScript. Αυτοί δε θα δουν καθόλου εικόνες στη σελίδα μας! Χμ...
:think:
Το πρόβλημα δε φαίνεται να έχει λύση. Αν δε δώσουμε τιμή στο src δε βλέπουν εικόνες οι "χωρίς JavaScript", αν δώσουμε τιμή ξεκινάει αυτόματα το φόρτωμα και χάνουμε τον έλεγχο από τα χέρια μας. Λοιπόν, να εγκαταλείψουμε την προσπάθεια? Όχι ακόμα! Θα παίξουμε το τελευταίο μας χαρτί, το <noscript>:

Κώδικας: Επιλογή όλων

<noscript><img src="Img1.png" order=1></noscript>
<noscript><img src="Img2.png" order=1></noscript>
<noscript><img src="Img3.png" order=3></noscript>
<noscript><img src="Img4.png" order=2></noscript>
<noscript><img src="Img5.png" order=2></noscript>
Λύσαμε το πρόβλημα των "χωρίς JavaScript" με χρήση ωμής δύναμης, αλλά βάλαμε κι άλλο βάρος στους ώμους της φτωχής JavaScript (μη φοβάστε αντέχει!). Πρέπει τώρα να αντικατασταθεί το attribute "src" με "file" και να απαλλαγούμε από τα <noscript>. Το HTML-DOM διαθέτει όλες της ιδιότητες και μεθόδους που χρειαζόμαστε και οι σύγχρονοι browsers είναι όλοι DOM-Enabled, έτσι δεν είναι? Ναι? Όχι!! Απίστευτο και όμως αληθινό. Κανένας browser δε νοιάζεται να αναλύσει τα περιεχόμενα του tag <noscript>. Απ'ότι φαίνεται κανείς δεν φαντάστηκε ότι θα μπορούσε να είναι περισσότερο χρήσιμο από την εμφάνιση ενός μηνύματος του στυλ "Η σελίδα απαιτεί JavaScript". Τουλάχιστον ο Firefox και ο IE επιτρέπουν την ανάγνωση του περιεχομένου του tag με μορφή string, και στο κάτω-κάτω αυτό είναι όλο που χρειαζόμαστε. Μπορείτε να δείτε το αποτέλεσμα εδώ. Όμως ο Opera αποδεικνύεται άθραυστο καρύδι. Δεν επιτρέπει την ανάγνωση του περιεχομένου του <noscript> με κανένα τρόπο. Τουλάχιστον αυτό ισχύει με την έκδοση 7.54 που έχω εγώ. Αν κάποιος έχει νεώτερη έκδοση του Opera παρακαλώ ας δοκιμάσει να δει αν φαίνονται οι εικόνες στην παραπάνω σελίδα.

Υ.Γ. Οι εικόνες είναι κοινές για όλα τα παραδείγματα. Μόλις τις δείτε μία φορά αποθηκεύονται στη cache του δίσκου και δεν ξανακατεβαίνουν στα επόμενα παραδείγματα. Αν θέλετε να ξανακάνετε τις εικόνες να κατέβουν πρέπει να κάνετε Clear Cache. Είναι πολύ πιο εύκολο αν έχετε το Extension WebDeveloper στον Firefox, όπως και για να πειραματίζεστε κάνοντας on-off τη JavaScript.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από ThyClub » 21 Φεβ 2005 09:08

Έγινε βοήθημα :wink: .

Ευχαριστούμε skeftomilos :victory:

Άβαταρ μέλους
fmayakos
Honorary Member
Δημοσιεύσεις: 1249
Εγγραφή: 23 Ιούλ 2001 03:00
Τοποθεσία: Θεσσαλονίκη

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από fmayakos » 01 Μαρ 2005 22:43

Πως μου ξέφυγε αυτό;
Φανταστικό tut, φίλε! Έπαθα πλάκα!

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από EneMe » 20 Δεκ 2005 11:54

Επειδή κάπου χάθηκα στο κατεβατό και δεν έχω τον χρόνο να το ψάξω, μήπως μπορεί να πει τί εννοεί εδώ ο ποιητής; Step by step...

Θέλω οι 4 εικόνες του footer να φορτώνονται πριν ξεκινήσει το φόρτωμα του περιεχομένου (που αποτελείται από πολλές εκόνες)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από skeftomilos » 20 Δεκ 2005 14:10

Το γενικό συμπέρασμα είναι ότι δεν υπάρχει αξιόπιστος τρόπος που να δουλεύει με-και-χωρίς JavaScript. Αν αυτό δεν είναι πρόβλημα, τότε το παράδειγμα 3 είναι αυτό που χρειάζεσαι. Αλλά επειδή λογικά θα θέλεις να φαίνονται οι εικόνες και χωρίς JavaScript, θα προτείνω κάτι άλλο. Απ' ό,τι έχω δει οι browsers φορτώνουν τις εικόνες με τη σειρά που εμφανίζονται στον HTML κώδικα. Οπότε αν καταφέρεις να βάλεις τον κώδικα του footer στην αρχή του body πιστεύω ότι θα δουλέψει όπως πρέπει. Τώρα για το πώς θα γίνει αυτό είναι υπόθεση CSS, χωρίς να είμαι βέβαιος ότι γίνεται.

Μια άλλη ιδέα που μου ήρθε τώρα είναι να γίνουν preload οι τέσσερις εικόνες στο τμήμα head της σελίδας:

Κώδικας: Επιλογή όλων

<script type="text/javascript">
  new Image&#40;&#41;.src = "eikona1.png"
  new Image&#40;&#41;.src = "eikona2.png"
  new Image&#40;&#41;.src = "eikona3.png"
  new Image&#40;&#41;.src = "eikona4.png"
</script>
Ακόμα καλύτερη ιδέα, ίσως να μπορεί να γίνει preload με απλή HTML στην αρχή του body:

Κώδικας: Επιλογή όλων

<div style="display&#58;none">
  <img src="eikona1.png">
  <img src="eikona2.png">
  <img src="eikona3.png">
  <img src="eikona4.png">
</div>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.



ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από ALR » 09 Αύγ 2006 15:03

skeftomilos έγραψε:Το γενικό συμπέρασμα είναι ότι δεν υπάρχει αξιόπιστος τρόπος που να δουλεύει με-και-χωρίς JavaScript. Αν αυτό δεν είναι πρόβλημα, τότε το παράδειγμα 3 είναι αυτό που χρειάζεσαι. Αλλά επειδή λογικά θα θέλεις να φαίνονται οι εικόνες και χωρίς JavaScript, θα προτείνω κάτι άλλο. Απ' ό,τι έχω δει οι browsers φορτώνουν τις εικόνες με τη σειρά που εμφανίζονται στον HTML κώδικα. Οπότε αν καταφέρεις να βάλεις τον κώδικα του footer στην αρχή του body πιστεύω ότι θα δουλέψει όπως πρέπει. Τώρα για το πώς θα γίνει αυτό είναι υπόθεση CSS, χωρίς να είμαι βέβαιος ότι γίνεται.

Μια άλλη ιδέα που μου ήρθε τώρα είναι να γίνουν preload οι τέσσερις εικόνες στο τμήμα head της σελίδας:

Κώδικας: Επιλογή όλων

<script type="text/javascript">
  new Image&#40;&#41;.src = "eikona1.png"
  new Image&#40;&#41;.src = "eikona2.png"
  new Image&#40;&#41;.src = "eikona3.png"
  new Image&#40;&#41;.src = "eikona4.png"
</script>
Ακόμα καλύτερη ιδέα, ίσως να μπορεί να γίνει preload με απλή HTML στην αρχή του body:

Κώδικας: Επιλογή όλων

<div style="display&#58;none">
  <img src="eikona1.png">
  <img src="eikona2.png">
  <img src="eikona3.png">
  <img src="eikona4.png">
</div>
Με αυτή τη λογική του div και display :none, μπορούμε να κάνουμε ένα Flash object να φορτώνει αφού φορτώσουν τα υπόλοιπα στοιχεία μιας σελίδας ;
Ίσως αν βάζαμε το flash μέσα σε ένα div με display:none και στο τέλος της σελίδας με κώδικα js να δίναμε εντολή να φορτώσει ( αφού ο browser φορτώνει με τη σειρά ότι εικόνα βλέπει ) .

Η λογική μπορεί να στέκει , αλλά σε κώδικα δε στέκω εγώ :p

Φίλε και υπέρτατε scriptmaster Skeptomile , μπορείς να βοηθήσεις για ακόμη μια φορά ;
Γίνονται πραγματάκια

Άβαταρ μέλους
spin
Δημοσιεύσεις: 418
Εγγραφή: 19 Δεκ 2002 06:52
Τοποθεσία: Los Angeles
Επικοινωνία:

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από spin » 10 Αύγ 2006 03:34

πολύ ωραίο και χρήσιμο tutorial thanks...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πώς φορτώνονται οι εικόνες με τη χρονική σειρά που θέλω?

Δημοσίευση από skeftomilos » 11 Αύγ 2006 05:14

Σχετικά με τις ιδιοτροπίες των flash objects δηλώνω λίγο-πολύ ανίδεος (και θα προσπαθήσω να παραμείνω για όσο περισσότερο γίνεται :D). Με το θέμα έχει ασχοληθεί επισταμένα ο Ολλανδός, σε ένα υβρίδιο scripting και αναζήτησης Αγνώστου Ταυτότητος Ιπταμένων Αντικειμένων. Δεν έχω εξετάσει το script του για να ξέρω λεπτομέρειες.

Όσο για το display:none με εικόνες, έχει διαπιστωθεί ότι λειτουργεί στους περισσότερος browsers αλλά όχι σε όλους (αν θυμάμαι καλά δε δουλεύει στον Opera).
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες