(jQuery) div veranderen, gaat te langzaam [opgelost]
Allereerst mijn excuses als dit topic in het JavaScript gedeelte hoort.
Ik heb een div, hiervan wil ik de background image laten overlopen in een andere.
Ik heb bekeken hoe ik dit het beste kan doen, en ben uiteindelijk gegaan voor de oplossing om de class van de div te veranderen.
Hier een paar stukjes code:
Code (php)
1
2
3
2
3
<div id="nav1">
Over ons
</div>
Over ons
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav1{
float: left;
width: 106px;
height: 161px;
background: url('images/nav_1_active.png') no-repeat;
-webkit-transition: background-image 1s;
-moz-transition: background-image 1s;
-o-transition: background-image 1s;
-ms-transition: background-image 1s;
transition: background-image 1s;
}
.nav1-checked{
background: url('images/nav_1_normal.png') no-repeat;
}
float: left;
width: 106px;
height: 161px;
background: url('images/nav_1_active.png') no-repeat;
-webkit-transition: background-image 1s;
-moz-transition: background-image 1s;
-o-transition: background-image 1s;
-ms-transition: background-image 1s;
transition: background-image 1s;
}
.nav1-checked{
background: url('images/nav_1_normal.png') no-repeat;
}
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(function() {
$(".nav1").click(function() {
$(".nav1").toggleClass("nav1-checked");
$(".nav2").toggleClass("nav2-checked");
});
});
$(".nav1").click(function() {
$(".nav1").toggleClass("nav1-checked");
$(".nav2").toggleClass("nav2-checked");
});
});
Dit werkt prima, alleen nu heb ik het probleem dat als ik op de nav1 div klik, dat er helemaal geen background-image te zien is. (Wel begint de css timer al te lopen (Als ik langer dan 1 seconde niks zie, zie ik dus ook helemaal geen overgang))
Dat hij niks laat zien varieert tussen 0.1 seconde en 3 seconde. (Waar ik nu ben heb ik wel een langzame internet verbinding).
Weet iemand of het normaal is dat het zo lang kan duren?
En weet ook iemand hoe ik dit kan oplossen?
Gewijzigd op 24/07/2013 13:32:48 door Tom aan t Goor
Het nadeel van deze methode is -denk ik- dat wanneer je met jquery een andere class aan de image hangt en de css uitgelezen wordt dat de browser dan nog de andere afbeelding moet downloaden.
Met javascript is het mogelijk om te checken wanneer afbeelding 1 geladen is en kan afbeelding 2 alvast op de achtergrond geladen worden.
Er zijn legio libraries te downloaden op internet die dat ook voor je regelen maar met JQuery kan het ook:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
bron: http://stackoverflow.com/questions/476679/preloading-images-with-jquery
Dan haalt die backgroud de image uit de cache.
Wel ... zie of dat helpt.
Ik zal mijn reactie aanpassen als het wel/niet gelukt is.
Toevoeging op 24/07/2013 13:32:35:
Het is gelukt met de preload functie die Frank heeft gegeven. Bedankt.