Προς το περιεχόμενο

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


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;
}

9epd.jpg

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

  • Like 1
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Για τις 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">

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημοσ. (επεξεργασμένο)

Για το πρώτο, το έκανα ήδη αλλά για κάποιον που μπαίνει πρώτη φορά πάλι το φόρτωμα του 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>
Επεξ/σία από SlackulatoR
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...