Tijden veranderen
Preloaden verbetering?
Ik ben bezig een pagina te maken waarbij er snel door verschillende afbeeldingen gebladerd moet kunnen worden.
Omdat de nadruk op 'snel' ligt, heb ik het volgende gedaan, (nou ja, het is eigenlijk iets uitgebreider maar dit is het princype, in het origineel zitten nog een aantal controles)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- in de head -->
<script>
var key = 0;
var test = new Array;
for(var i = 0; i < 20; i ++){
test[i] = new Image;
test[i].src = "images/image_" + i + ".jpg";
}
function next(){
key ++;
document.getElementById('image').src = test[key].src;
}
function last(){
key --;
document.getElementById('image').src = test[key].src;
}
</script>
<!-- in de body-->
<input type="button" onclick="next();" value="Next">
<input type="button" onclick="last();" value="Last">
<a href="http://site.nl/pagina/images/1/" onclick="next(); return false;"><img id="image" src="images/image_0.jpg" alt="image" /></a>
<script>
var key = 0;
var test = new Array;
for(var i = 0; i < 20; i ++){
test[i] = new Image;
test[i].src = "images/image_" + i + ".jpg";
}
function next(){
key ++;
document.getElementById('image').src = test[key].src;
}
function last(){
key --;
document.getElementById('image').src = test[key].src;
}
</script>
<!-- in de body-->
<input type="button" onclick="next();" value="Next">
<input type="button" onclick="last();" value="Last">
<a href="http://site.nl/pagina/images/1/" onclick="next(); return false;"><img id="image" src="images/image_0.jpg" alt="image" /></a>
Goed, dit werkt prachtig, kom je op de website dan issie nog een tikkie traag maar als het eenmaal geladen is kan je heerlijk snel door de afbeeldingen bladeren. De afbeelding zit in een link zodat het nog steeds werkt als javascript niet toegankelijk is (maar dan trager)
Dus wat is nu eigenlijk het probleem? De pagina moet ook goed werken op een mobieltje, dat doet het matig, omdat het aardig wat afbeeldingen zijn het kunnen er 20 zijn maar ook 40, en de afbeeldingen een aardig formaat hebben, duurt het eerste bezoek aan de pagina nogal lang, klik je op de link voordat de pagina geladen is dan ontstaat er een fout en treed de a href in werking,
Wat mij doet denken... is er geen betere manier om afbeeldingen te preloaden dat ook werkt op een mobiel? (had gedacht over iframes maar die werken niet op alle mobieltjes, or so i heard)
Dat dit nogal zwaar is voor mobieltjes is de reden dat ik een betere preloading manier zoek, ik vind het niet erg dat dit veel data kost maar wel dat de gebruiker redelijk lang moet wachten voordat hij door kan klikken.
Maar het hele idee van preloading is toch dat je het onopgemerkt doet?
Eventueel kan je nog handmatig beslissen hoeveel plaatjes je tegelijk wilt preloaden door er maar een paar per keer aan de array toe te voegen. Via image.onload kan je horen wanneer hij geladen is (en onerror wanneer dat mislukt)
@Oetzie, De afbeeldingen bevatten teksten, kleiner maken heeft betekend dat ze moeten inzoemen en daarmee gaat de kwaliteit naar beneden, al met al dus een slechte oplossing. De kwaliteit naar beneden gooien is ook geen oplossing helaas.
@Jelmer, dat kan best eens een goeie oplossing zijn, maar als de gebruiker dan naar de volgende gaat voordat het script de src in de volgende key gezet heeft?
Zou het anders niet handiger zijn als de onload van de eerste afbeelding het preloaden van de volgende afbeelding in gang zet, en die onload weer van de volgend, enz?
Gewijzigd op 18/08/2010 12:18:37 door Johan Dam
De oplossing die voor mij tot nu toe het beste uit de bus kwam is schematisch:
<ul>
<li><img src="img1.png" id="img1" /></li>
<li><img src="img2.png" id="img2" /></li>
<li><img src="img3.png" id="img3" /></li>
<li><img src="blank.gif" id="img4" /></li>
<li><img src="blank.png" id="img5" /></li>
</ul>
De eerste 3 afbeeldingen worden standaard geladen ( 3 foto's is mijn "view-scope" ahw ).
Zodra de 2e foto getoond wordt aan de gebruiker, worden vanaf: <huidige foto +1>, 3 foto's geladen ( preload ).
blank.gif is een transparante gif overigens.
@Johan, nee ik zou iets van 5 of meer afbeeldingen eerder en later laden. Een mens kan vrij snel scrollen, maar afbeeldingen laden duurt langer.
En waarom maak je niet van:
Code (php)
1
2
3
4
2
3
4
function next(){
key ++;
document.getElementById('image').src = test[key].src;
}
key ++;
document.getElementById('image').src = test[key].src;
}
Code (php)
1
2
3
4
2
3
4
function next(){
key ++;
document.getElementById('image') = test[key];
}
key ++;
document.getElementById('image') = test[key];
}
Dat moet toch ook werken?
Gewijzigd op 18/08/2010 14:57:45 door Pim -
Maar het lijkt me echter niet zo uitmaken voor performance?
Misschien een klein beetje voor- of nadeel.
Image is inderdaad wel een DOMNode volgens mij, dus je zou hem met appendChild of replaceChild in dit geval kunnen gebruiken. Maar je bent dan wel meteen alle andere attributen die al aan het bestaande plaatje waren toegewezen kwijt.
De afbeelding-urls komen uit de db, dus met php, de return values kunnen dus best wel 'toegewezen' worden ;)
Denk niet dat het handig is om met de DOM te klooien, de huidige opzet werkt in princype prima, het probleem ligt bij hoe de afbeeldingen geladen worden. Of ik moet een voordeel van de DOM missen?
Toevoeging op 19/08/2010 08:52:30:
@Pim, even uitgetest en krijg de foutmelding 'invalid assignment left-hand side' dus nee, geloof dat ht toch echt via de src zal moeten ;)
@Jelmer, bedankt voor de onload tip, dat werkt prima!
Hoewel het laden natuurlijk even lang duurt als voorheen, merk je er nu veel minder van. (Voorheen moest je wachten voordat de next() functie werkte, waarschijnlijk omdat de volgende key nog niet bestond of de javascript bleef wachten op de afbeelding oid) nu kan je rustig bladeren en word alles ondertussen geladen, enige wat je ziet is dat de browser een beetje lang blijft 'laden' ookal is de site (voor zover de gebruiker kan zien) gewoon bruikbaar.
Ik heb nu ongeveer dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var key = 0;
var test = new Array;
for(var i = 0; i < 20; i ++){
test[i] = new Image;
}
window.onload = function(){
for(var i = 0; i < 20; i ++){
test[i].src = "images/image_" + i + ".jpg";
}
}
function next(){
key ++;
document.getElementById('image').src = test[key].src;
}
function last(){
key --;
document.getElementById('image').src = test[key].src;
}
var test = new Array;
for(var i = 0; i < 20; i ++){
test[i] = new Image;
}
window.onload = function(){
for(var i = 0; i < 20; i ++){
test[i].src = "images/image_" + i + ".jpg";
}
}
function next(){
key ++;
document.getElementById('image').src = test[key].src;
}
function last(){
key --;
document.getElementById('image').src = test[key].src;
}
Gewijzigd op 19/08/2010 08:54:59 door Johan Dam