preload images

bill@ki · 30 Απριλίου 2011

Καλησπέρα παιδιά,

Φτιάχτω ένα σαιτ και θέλω να κάνω preload αρκετές φωτογραφίες, ώστε με το που θα μπαίνει κάποιος στη σελίδα να τις φορτώνει εξαρχής. Δεν ξέρω ακριβώς τον αριθμό αλλά ίσως να πρόκειται για 40-50 φωτογραφίες, ίσως και κάτι παραπάνω. Ο λόγος που θέλω κάτι τέτοιο είναι γιατί ο χρήστης θα τρέχει μία διαδικτυακή εφαρμογή εκμάθησης τυφλού συστήματος και οι φωτογραφίες θα πρέπει να είναι άμεσα διαθέσιμες, μιας και πρόκειται να μετράει και χρόνο και δεν πρέπει να υπάρχει καθυστέρηση στο φόρτωμα. Το "κλασικό" preload των φωτογραφιών στην αρχή της σελίδας που έχω δει σε αρκετά σαιτ θα μου κάνει τη δουλειά; Μπορώ μήπως να τις φορτώσω ανεξάρτητα από την σελίδα και απλά να "τραβάει" κάθε φορά την εικόνα που χρειάζεται ο χρήστης;

Ευχαριστώ εκ των προτέρων!

Haldol · 30 Απριλίου 2011

Μια σκέψη είναι να τις φορτώσεις σε μία σελίδα πριν από το τεστ, όπου θα του λες να περιμένει όσο το τεστ «ετοιμάζεται». Έτσι θα μπουν στην cache του browser του χρήστη, οπότε στην κανονική σου σελίδα θα φορτώσουν ακαριαία.

bill@ki · 1 Οκτωβρίου 2011

Γεια σας και πάλι. Επανέρχομαι πάλι στο θέμα (μιας και η αλήθεια είναι ότι το είχα παρατήσει), με την εξής απορία. Σύμφωνα με την ιδέα που μου έδωσε ο Haldol και αρκετό ψάξιμο κατέληξα σε αυτό τον κώδικα όπου μπορώ να κάνω και κατευθείαν redirect στη σχετική σελίδα που θέλω:

>
<html>
<head>
<script language="JavaScript1.2">
<!-- begin hiding

startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("xxx.jpg","xxx.jpg","xxx.jpg","xxx.jpg") // Fill this array with the images you wish to preload
var locationAfterPreload = "xxx.html" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 250 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 15 // The height of the gradient/preload bar
var backgroundOfGradient = "#000000" // Default color while the preload bar is "filling up"

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "c" 
startingColor[1] = "f"
startingColor[2] = "f"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "c"
endingColor[1] = "0"
endingColor[2] = "0"

// FOR TROUBLESHOOTING:
var gap = 5 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!


// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!

if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
   startingColor[i] = startingColor[i].toLowerCase();
   endingColor[i] = endingColor[i].toLowerCase();
   startingColor[i] = eval(startingColor[i]);
   endingColor[i] = eval(endingColor[i]);
   diff[i] = (endingColor[i]-startingColor[i])/num;
   ones[i] = Math.floor(diff[i]);
   sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
   hilite[i] = "#";
   while (j < 3) {
       hilite[i] += convert[startingColor[j]];
       hilite[i] += convert[endingColor[j]];
       startingColor[j] += ones[j];
       endingColor[j] += sixteens[j];
       if (endingColor[j] > 15) {
           endingColor[j] -= 15;
           startingColor[j]++;
       }
       j++;
   }
   j = 0;
   i++;
}
function loadImages() {
   for (i = 0; i < imgLen; i++) {
       preImages[i] = new Image();
       preImages[i].src = yourImages[i];
       loaded[i] = 0;
       cover[i] = Math.floor(num/imgLen)*(i+1)
   }
   cover[cover.length-1] += num%imgLen
   checkLoad();
}
function checkLoad() {
   if (pending) { changeto(); return }
   if (currCount == imgLen) { location.replace(locationAfterPreload); return }
   for (i = 0; i < imgLen; i++) {
       if (!loaded[i] && preImages[i].complete) {
           loaded[i] = 1; pending++; currCount++;
           checkLoad();
           return;
       }
   }
   setTimeout("checkLoad()",10);
}
function changeto() {
   if (h+1 > cover[currCount-1]) {
       var percent = Math.round(100/imgLen)*currCount;
       if (percent > 100) while (percent != 100) percent--;
       if (currCount == imgLen && percent < 100) percent = 100;
       defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
       document.getElementById('displayPercentage').innerHTML = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
       pending--;
       checkLoad();
       return;
       
   }
   eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
   h++;
   setTimeout("changeto()",1);
   

}


// end hiding -->

</script>
</head>
<body>
<center>
<font face="Verdana, Arial, Helvetica" size="2"><center>Preloading Images... Please Wait..</center>
<script language="JavaScript1.2">

<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
   document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('<td bgcolor=white>'+ defaultStatus + '</td></tr></table>');
document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)">Skip Preloading</a>  |  <a href="http://GoSomeWhere.com">GoSomeWhere</a></small></p></font>')
loadImages();
// end hiding -->
</script>
</center>

<div id="displayPercentage"></div>

</body>
</html>

Καταρχήν πως στο καλό μπορώ να τραβάω τις φωτογραφίες που ανέβασα μέσω του κώδικα αυτού στη σελίδα που θα κάνει redirect; Μόνο το όνομα της φωτογραφίας αρκεί;

Επίσης το θέμα μου είναι ότι μήπως άδικα παιδεύομαι με τέτοια μακρινάρια κώδικα; Ψάχνοντας βρήκα τρόπους όπως με css,js (καμιά σχεση με τον κώδικα αυτό) καθώς και διάφορες απόψεις γαι το καθένα. Διάβασα ότι αα, όχι με js είναι "παλαιομοδίτικος" τρόπος άσε που ενδέχεται να μην τρέχει σε κάποιους φυλλομετρητές κτλ. Αλλά για να πουμε και το σωστο αν δεν δουλέψει αύτη η εντόλη δεν θα τρέξουν και αλλες, γιατί δεν νομίζω κανεις να μην τρέχει κάποιες εντολές σε js στη σελίδα του; Νομίζω πως όσο περισσότερο ψάχνομαι άλλο τόσο μεγαλώνει το ερωτηματικό πάνω από το κεφάλι μου

Ισως έχω και την τάση να διογκώνω και τα πράγματα χωρίς να υπάρχει στη ουσία πρόβλημα!

Σύνδεση

preload images

Προτεινόμενες αναρτήσεις

bill@ki

Haldol

bill@ki

Αρχειοθετημένο

Σύνδεση