Gallerij op website traag. Laad niet in php script

[kunoke]

Hallo, 

Ik heb onlangs een template gekocht.

Nu zit ik met een probleem. De galerij is ontzettend traag. Stel nu dat ik een database heb en per rij in de database een foto aan de galerij wil doen dan laat m'n webpagina gewoon niet. Er zitten zo'n 20 foto's in de database. Als ik die zonder het php scriptje weergeef werkt die wel maar ook niet op een goede snelheid. Het ligt waarschijnlijk aan de CSS.

Kan iemand me hier bij helpen?

 

Alvast Bedankt,

P.S: De foto's worden opgeslagen op amazon S3 dus niet in de files folder ofz

Je kan de css bestanden enz vinden op:

 

https://tejovandenbroeck.com/css

https://tejovandenbroeck.com/files

https://tejovandenbroeck.com/fonts

Dit is de code van een foto in de galerij:

            <div class="single-hero-slide bg-img" style="background-image: url();">
                <div class="container h-100">
                    <div class="row h-100 align-items-center">
                        <div class="col-12">
                            <div class="slide-content text-center">
                                <div class="post-tag">
                                    <a href="#" data-animation="fadeInUp"></a>
                                </div>
                                <h2 data-animation="fadeInUp" data-delay=""><a href="single-post.html"></a></h2>
                            </div>
                        </div>
                    </div>
                </div>
            

 

 

[leroy]

Het heeft helemaal niets met CSS te maken, dat kan ook helemaal niet. 

 

Voor zover ik kan zien komt het o.a. door de owl carousel library die je gebruikt. Misschien komt het door een mismatch in versies van andere libraries, omdat ze misschien niet met elkaar werken, maar dat kan ik niet zien. 

De reden waarom je website nu niet werkt, is omdat er in javascript iets van een loop-event ontstaat, maar waarom zou ik niet weten. 

 

Omdat je een scala aan front-end libraries gebruikt, zonder dat je weet of die libraries wel met elkaar werken, zou ik (net zoals ik in PHP heb voorgesteld) een package manager gebruiken. In PHP heb je composer, maar in frontend (css, js) heb je npm. 

Deze zoekt de juiste libraries/dependencies bij elkaar en houdt rekening met de juiste versie. Ga je verder dan dat, kun je ook webpack gebruiken welke je libraries weer bundelt tot goede code. Webpack houdt ook rekening met code quality, en potentiële bugs door programmeer foutjes.

 

Wil je dat allemaal niet, dat kan ook, maar dan blijf je zoeken naar een naald in een hooiberg. 

Mijn eerste suggestie zou dan ook zijn om de laatste versies te gebruiken van de libraries die compatible zijn met de laatste jQuery v2.2. Of iets "compatible" is kun je meestal op de github websites van de libraries vinden. 

Zo gebruik je bijvoorbeeld bootstrap 4 en jQuery 2. Ik kan je uit ervaring zeggen dat die 2 niet goed met elkaar werken. Bootstrap 4 vereist namelijk minimaal jQuery 3. Maar jQuery 3 werkt dan weer niet goed in Internet Explorer 8 (en dus ook nog bijv. windows xp bezoekers).

En als je Internet Explorer 8 en ouder niet ondersteund moet je daarvoor wel iets inbouwen, zodat je die bezoekers een melding geeft. 

 

Zo zie ik ook dat je jquery.countdown gebruikt die werkt met jQuery 2.1, terwijl je jQuery 2.2 gebruikt.

 

Ik zou eerst en vooral je libraries/dependencies controleren, en stuk voor stuk testen. Als je het goed wilt doen, en geen kopzorgen wilt omtrent versies, moet je NPM als package manager gebruiken. In het begin is NPM misschien wel wat lastig, maar als je het je eenmaal eigen hebt gemaakt is het een super handige tool voor frontend package management. Zeker in combinatie met webpack. 

 

[kunoke]

Ik zeg alvast sorry voor het volgende maar alsnog bedankt voor de moeite.

 

Ik ben er zo net achter gekomen met het optellen van hoeveel div's ik in het stukje open en dat trek ik per keer dat er weer een </div> staat 1 af.

Nu kwam ik er zo achter dat ik op het getalletje 1 uitkwam en niet op 0 dus d.w.z dat ik 1 div was vergeten te sluiten.

Je zou dus zeggen dat er nooit zo'n loop gaat komen door 1 div te vergeten sluiten. Maar schijn blijkt zodra ik de div had gesloten was alles in één keer opgelost.

Echt waar bedankt voor de moeite alsnog.

 

Fijne avond verder,

Met vriendelijke groet,

Kuno Claes 

[kweezie wabbit]

Bedankt voor het delen van de oplossing.

 

Dan kunnen we het topic afsluiten.

Succes nog met je site.