poscaman Δημοσ. 10 Φεβρουαρίου 2010 Δημοσ. 10 Φεβρουαρίου 2010 Καλησπέρα. Θέλω να χρησιμοποιήσω έναν image preloader, για να φορτώνει κάποιες εικόνες, για αργότερα. Έχω χρησιμοποιήσει κανα-2 έναν css και εναν σε js, αλλά δεν λειτουργούν. Καμμιά ιδέα; Ευχαριστω
macabre_sunsets Δημοσ. 10 Φεβρουαρίου 2010 Δημοσ. 10 Φεβρουαρίου 2010 Τι εννοείς για αργότερα? Μπορείς να φορτώσεις τις εικόνες που θέλεις στην σελίδα σου, αλλά να τις κάνεις κρυφές (style="display: none;") ώστε να μην τις βλέπει ο επισκέπτης. Αργότερα όταν θα χρειαστεί να τις εμφανίσεις, θα είναι κρατημένες στην cache του επισκέπτη και θα εμφανίζονται "στιγμιαία". Αν έχω καταλάβει καλά δηλαδή.
bnvdarklord Δημοσ. 10 Φεβρουαρίου 2010 Δημοσ. 10 Φεβρουαρίου 2010 μπορες σε μια συναρτηση javascript να γράψεις για κάθε εικόνα το εξής > var img = newImage(); img.src = "images/img1.jpg"; και την συναρτηση αυτή να την βάλεις στο onload του body πχ <body onload="preload()"> Το αρνητικό είναι οτι ο επισκέπτης του site μπορει να απενεροποιήσει το javascript.... edit: για να δουλεψει σωστά πρεπει να χρησιμοποιήσεις διαφορετικές μεταβλητές για καθε εικόνα...
poscaman Δημοσ. 10 Φεβρουαρίου 2010 Μέλος Δημοσ. 10 Φεβρουαρίου 2010 ευχαριστώ για τις απαντήσεις σας. Προτιμώ σε css. Aυτή τη στιγμη έχω φτιάξει το εξης στο css αρχείο. #preloader { background-image: url('image1'); background-image: url('image2'); width: 0px; height: 0px; display: inline; } το path είναι σωστό. Αλλά δεν δουλεύει... Να αντικαταστήσω το display:inline με display:none ??
macabre_sunsets Δημοσ. 10 Φεβρουαρίου 2010 Δημοσ. 10 Φεβρουαρίου 2010 Νομίζω δεν μπορείς να έχεις 2 background-image στο ίδιο element. Τροποποίησέ το ως εξής : >#preloader { display: none; } και φόρτωσε τις εικόνες σου κανονικά, ><img id="preloader" src="image1.xxx" alt="" /> <img id="preloader" src="image2.xxx" alt="" /> Μιας και είναι display:none δεν θα φαίνονται στον επισκέπτη. Για να μην σου καθυστερεί την σελίδα βάλτες να φορτώνουν πριν το </body>. Δεν ξέρω άμα ισχύει κι όλας αυτό σίγουρα.
PCharon Δημοσ. 10 Φεβρουαρίου 2010 Δημοσ. 10 Φεβρουαρίου 2010 Μερικές σημειώσεις: Το CSS δε δούλεψε διότι ήταν λάθος, δε μπορείς να βάλεις διπλό property για το ίδιο element. Η λύση με javascript δεν θα δουλέψει σε μερικούς φυλλομετρητές, που για κάποιο λόγο δεν προσέχουν πως το URL της εικόνας είναι στο cache και τις ξανακάνουν download. Το display:none είναι πάλι λάθος. Μερικοί φυλλομετρητές το περιεχόμενο εντός display:none στοιχείων δεν το κάνουν download, μέχρι να αλλάξει το property. Αυτή τη στιγμή υπάρχουν άλλα δύο ευκολάκια στο μυαλό μου, το ένα είναι πχ: <div style="background-image:url('image1')"></div> <div style="background-image:url('image2')"></div> ...κτλ (δε χρειάζεται ορισμό width/height, χωρίς περιεχόμενο τα divs θα είναι 0Χ0) ^αυτό για κάποιο λόγο που δε θυμάμαι δεν το έχω χρησιμοποιήσει και το άλλο είναι πχ: .pre{width:0px;height:0px} <img src="image1" alt="" class="pre" /> <img src="image2" alt="" class="pre" /> ...κτλ ^αυτό έχω χρησιμοποιήσει κι εγώ σε κάποια περίπτωση Αν είναι πάρα πολλές οι εικόνες, βάζεις τα ονόματα των αρχείων σε ένα array και με javascript δημιουργείς δυναμικά τα παραπάνω στοιχεία.
poscaman Δημοσ. 10 Φεβρουαρίου 2010 Μέλος Δημοσ. 10 Φεβρουαρίου 2010 Μερικές σημειώσεις:Το CSS δε δούλεψε διότι ήταν λάθος, δε μπορείς να βάλεις διπλό property για το ίδιο element. Η λύση με javascript δεν θα δουλέψει σε μερικούς φυλλομετρητές, που για κάποιο λόγο δεν προσέχουν πως το URL της εικόνας είναι στο cache και τις ξανακάνουν download. Το display:none είναι πάλι λάθος. Μερικοί φυλλομετρητές το περιεχόμενο εντός display:none στοιχείων δεν το κάνουν download, μέχρι να αλλάξει το property. Αυτή τη στιγμή υπάρχουν άλλα δύο ευκολάκια στο μυαλό μου, το ένα είναι πχ: <div style="background-image:url('image1')"></div> <div style="background-image:url('image2')"></div> ...κτλ (δε χρειάζεται ορισμό width/height, χωρίς περιεχόμενο τα divs θα είναι 0Χ0) ^αυτό για κάποιο λόγο που δε θυμάμαι δεν το έχω χρησιμοποιήσει και το άλλο είναι πχ: .pre{width:0px;height:0px} <img src="image1" alt="" class="pre" /> <img src="image2" alt="" class="pre" /> ...κτλ ^αυτό έχω χρησιμοποιήσει κι εγώ σε κάποια περίπτωση Αν είναι πάρα πολλές οι εικόνες, βάζεις τα ονόματα των αρχείων σε ένα array και με javascript δημιουργείς δυναμικά τα παραπάνω στοιχεία. Χρησιμοποίησα το δευτερο, και νομίζω ότι λειτουργεί. Ευχαριστώ πολύ, να σαι καλά
Προτεινόμενες αναρτήσεις
Αρχειοθετημένο
Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.