(jQuery) div veranderen, gaat te langzaam [opgelost]

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

OutSystems Developer

Bedrijfsomschrijving Deze organisatie is een toonaangevende speler in de vastgoedbranche en telt momenteel ruim 500 medewerkers. Met meer dan 150 applicaties staat er een complex applicatielandschap, bestaande uit standaard- en maatwerkapplicaties. De maatwerkapplicaties worden ontwikkeld door een inhouse development team. Het doel voor de komende periode is het verder vernieuwen en optimaliseren van het huidige applicatielandschap. Zo staat de organisatie aan de vooravond van de implementatie van een gloednieuw applicatiehuis, waar OutSystems een belangrijke rol in speelt. Binnen deze rol word je als OutSystems Developer verantwoordelijk voor de ontwikkeling van uiteenlopende applicaties met OutSystems. Om het nieuwe applicatiehuis te implementeren

Bekijk vacature »

Tom aan t Goor

Tom aan t Goor

24/07/2013 11:45:30
Quote Anchor link
Hoi,

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div id="nav1">
Over ons
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(function() {  
    $(".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
 
PHP hulp

PHP hulp

24/11/2020 12:30:19
 
Frank Nietbelangrijk

Frank Nietbelangrijk

24/07/2013 12:10:19
Quote Anchor link
Vooral grote afbeeldingen maken het laden langzamer.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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();


bron: http://stackoverflow.com/questions/476679/preloading-images-with-jquery
 
Kris Peeters

Kris Peeters

24/07/2013 12:11:56
Quote Anchor link
Je zou die 'nav_1_normal.png' en 'nav_1_active.png' al kunnen laden in een gewone <img>. Moffel die ergens weg; maak die 1 pixel groot, of zo.

Dan haalt die backgroud de image uit de cache.

Wel ... zie of dat helpt.
 
Tom aan t Goor

Tom aan t Goor

24/07/2013 12:41:46
Quote Anchor link
Ik heb momenteel wat problemen met de hosting.
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.