Αργό φόρτωμα εικόνας.

[SlackulatoR]

Καλημέρα, έχω φτιάξει μία προσωπική ιστοσελίδα στην οποία για κάποιο λόγο το λογότυπο μαζί με το menu φορτώνουν τελευταία.

 

Οι συγκεκριμένες εικόνες είναι png(το λογότυπο γύρω στα 20kb). Παρακάτω παραθέτω τον κώδικα που χρησιμοποιώ για να το εμφανίσω όπως και επίσης το timeline από τον Chrome μήπως μπορέσει κάποιος να καταλάβει γιατί συμβαίνει αυτό.

 

EDIT: Απ'ότι φαίνεται ευθύνεται το portfolio section το οποίο περιέχει πολλές jpg εικόνες, οι οποίες φορτώνουν πρώτα και αφού τελειώσουν φορτώνει το λογότυπο με το menu. Σε τι μπορεί να οφείλεται αυτό;

<div id="logo"></div>

#logo{
z-index:2;
background-image:url(../images/logo.png); 
background-repeat:no-repeat;
background-position:center; 
background-color:#393939;
width:406px;
height:374px;
margin:0 auto;
margin-top:40px;
position:relative;
}

[CyberCr33p]

Θα σου πρότεινα να ενεργοποιήσεις και το browser caching για τις εικόνες ώστε τη δεύτερη φορά που θα την επισκεφτεί κάποιος να φορτώσει ακόμα πιο γρήγορα.

[SlackulatoR]

Για τις jpg/css/js δεν το έχω ενεργοποιήσει γιατί εάν κάνω κάποια αλλαγή και ξανα-ανεβάσω το αρχείο που έχει αποθηκευτεί στην cache ο χρήστης δεν θα δει την αλλαγή. Βέβαια μου πρότειναν να προσθέτω την έκδοση ή κάποιον αριθμό στο τέλος της εικόνας για να λυθεί αυτό, δηλαδή: <img src="imgs/img1/thumb.jpg?1234"/> ή για αυτόματα μέσω php: <img src="/path/to/image.jpg?<?php echo filectime('/path/to/image.jpg'); ?>" alt="image">

 

Για το θέμα του λογότυπου τι μπορεί να γίνει όμως;

[alexitsios]

Έχεις σκεφτεί να κάνεις expire τους headers ή με javascript να περιμένεις να γίνουν preload όλες οι εικόνες;

[SlackulatoR]

Για το πρώτο, το έκανα ήδη αλλά για κάποιον που μπαίνει πρώτη φορά πάλι το φόρτωμα του logo θα γίνεται στο τέλος.

Με javascript/jQuery δε νομίζω να γίνεται γιατί η εικόνα φορτώνεται μέσω του background-image property σε css, οπότε και να στοχεύσω το div δεν θα δουλέψει.

 

EDIT: Δούλεψε τελικά έτσι, αφού τελειώσει το φόρτωμα της σελίδας ανοίγει το portfolio:

<script type="text/javascript">
jQuery(document).ready(function($) {
   jQuery(window).load(function () {
     $("#pfinner").load("portfolio.html");
   });
});
</script>

Επεξ/σία 30 Αυγούστου 2013 από SlackulatoR

[alexitsios]

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

[SlackulatoR]

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

Ένα πρόβλημα που δημιουργείτε είναι πως αν η javascript είναι απενεργοποιημένη στον browser δεν θα φορτώσει καθόλου το portfolio.

[sougiasdj]

Γιαυτό βγάζεις ενα ωραίο μήνυμα

<noscript>To view my Portofolio you need JavaScript!</noscript>

[SlackulatoR]

Αυτό έκανα, μετά από λίγο

[sonyxp]

παιδιά, ακόμα και σε πολύ ελαφριές σελίδες τυχαίνει να αργεί μερικές φορές σε μερικά Site.

 

Νομίζω ότι αυτό είναι θέμα Hosting, δηλαδή τα φθηνιάρικα πακέτα ίσως επιτρέπουν μικρό Bandwidth ανά σύνδεση... γνωρίζει κανείς κάτι ?

[alexitsios]

Δεν έχει να κάνει με το hosting το συγκεκριμένο. Έχει να κάνει με το πως έχεις στήσει το theme περισσότερο.

[sougiasdj]

Και τα 2 παίζουν ρόλο και μάλιστα ειναι αλληλένδετα. Αν το theme χρησιμοποιεί πολλά resources τότε ανάλογα το πακέτο μπορεί να σε περιορίζει η εταιρεία hosting που έχεις. Πολλες έχουν για παράδειγμα όριο τα 10 processes στην cpu. Αλλες εταιρείες έχουν τους δικούς τους περιορισμούς.

 

Τώρα για το συγκεκριμένο θέμα εναν χρόνο καθυστέρησης ειναι πολυ λογικό να υπάρχει.