Βήμα 1ο' : Βρείτε μια preload εικόνα.
Υπάρχουν πολλά site στα οποία μπορείτε να φτιάξετε μια τέτοια εικόνα. Το αγαπημένο μου είναι αυτό εδώ. Απλά, θυμηθείτε να μην κατεβάσετε μια εικόνα μεγάλη σε μέγεθος για να φορτωθεί πολύ πριν την μεγάλη εικόνα. Εδώ είναι η εικόνα που δημιούργησα:Βήμα 2ο' : Δημιουργήστε το CSS.
Βάλτε το επόμενο απόσπασμα κώδικα στο αρχείο σας, απλά αλλάξτε το 'youricon.gif' με το όνομα της δικιά σας εικόνας..load{background:url('images/youricon.gif') no-repeat center;}
Βήμα 3ο': Εφαρμογή του κώδικα.
Υπάρχουν διάφοροι τρόποι για να το κάνουμε αυτό. Αυτός είναι μάλλον ο πιο εύκολος. Απλά, περικλείσετε την εικόνα σε ένα div με class="load" και δίνοντας του τιμές ύψους και πλάτους αυτές τις μεγάλης εικόνας θα φορτωθεί<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="alternate text" /></div>
0 σχόλια
Δημοσίευση σχολίου