[jquery] trage animatie veel statestieken.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Php knipper

php knipper

27/04/2014 21:04:49
Quote Anchor link
Hallo,

Ik gebruik http://www.chartjs.org/ voor het maken van mijn statestieken, echter kunnen dit er soms redelijk wat woren op 1 pagina. Nu is mijn vraag hoe ik er voor kan zorgen dat dit niet heel de pc trager maakt (alles tergelijk laden geeft problemen).

Ik zat te denken om ieder <script></script> blok na elkaar te laten starten maar ik zou niet weten hoe ik dit moet doen.

Kunnen jullie me op weg helpen of weten jullie een betere manier?

Mvg. Knipper
 
PHP hulp

PHP hulp

28/01/2023 13:41:42
 
Frank Nietbelangrijk

Frank Nietbelangrijk

27/04/2014 21:47:02
Quote Anchor link
als je goed oplet doet chartjs.org zelf pas de animaties als de elementen in de viewport komen.

google eens op 'animate if in viewport'
 
Php knipper

php knipper

27/04/2014 21:59:40
Quote Anchor link
bij mij gebeurt alles op het zelfde moment, ik denk dat de demo pagina gebruik maakt van iets extra.

Ik heb dit gevonden.

http://jsfiddle.net/moagrius/wN7ah/
 
Frank Nietbelangrijk

Frank Nietbelangrijk

27/04/2014 22:02:05
Quote Anchor link
precies...
 
Php knipper

php knipper

27/04/2014 22:05:19
Quote Anchor link
maar hoe kan ik dit het beste gebruiken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).on( 'scroll', 'body', function(){
    console.log('Event Fired');
});


en dan een each uitvoeren?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

27/04/2014 22:55:10
Quote Anchor link
ik heb even een demo gemaakt. er wordt inderdaad van een .each() gebruikgemaakt:
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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  p {
    margin-bottom:100px;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>Try scroll</div>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
 
<script>
/*
In de HTML hierboven zien we acht paragrafen die ieder even dienst doen als een grafiek. de span binnen de paragraaf wordt met css verborgen gehouden.
De functie hieronder kijkt voor iedere paragraaf afzonderlijk of deze zichtbaar is in de viewport door de functie isOnScreen aan te roepen.
Als de functie TRUE teruggeeft dan wordt de span langzaam zichtbaar gemaakt. Dit moet de annimatie voor de grafiek voorstellen.
*/
function animateInsideViewport() {
    $("p").each(function( i ) {
        if($(this).isOnScreen())
            $(this).find("span").show(10000);
    })
}

// deze functie wordt automatisch aangeroepen als de pagina geladen is
$( document ).ready(function() {
    animateInsideViewport();
});

// deze functie wordt telkens aangeroepen als er gescrolld wordt
$( window ).scroll(function() {
    animateInsideViewport();
});

// functie die kijkt of een html element zichtbaar is in de viewport
$.fn.isOnScreen = function(){
    
    var win = $(window);
    
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    
};
</script>
 
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
 
Php knipper

php knipper

03/05/2014 21:51:51
Quote Anchor link
Sorry voor het late antwoord,

Hartelijk bedankt dat je tijd stak in het maken van het voorbeeld, het is heel handig.
Is het ook mogelijk om in de plaats van een each() op "script" te doen in plaats van "p" of een "script" een class te geven, en deze script tags uit te triggeren door het script?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/05/2014 00:27:13
Quote Anchor link
Het moet een HTML element, een HTML/CSS class of een HTML/CSS id zijn:

HTML elementen: p, div, lu, li, span en zo verder

eigenlijk gelden de normale css regels.

Het vormt een soort while() lus die alle elementen één voor één behandelt. er wordt in mijn voorbeeld dus voor elke <p></p> element bekeken of deze zichtbaar is in het venster en zo ja dan wordt de animatie gestart.

Toevoeging op 04/05/2014 00:37:59:

Je kan gewoon de code in de each loop zetten die je wilt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<p>Grafiek A</p>
<p>Grafiek B</p>
 
<script>
    $("p").each(function( i ) {
    // doe wat je wilt en vergeet niet dat $(this) naar het element wijst dat we nu behandelen. kijk maar:
    alert($(this).html());
    })
</script>
Gewijzigd op 04/05/2014 00:30:11 door Frank Nietbelangrijk
 
Php knipper

php knipper

04/05/2014 01:10:37
Quote Anchor link
dat snap ik, maar mag je ook een <sc ript></scri pt> tag een class geven zodat deze door de each kan.

en kan je dan in een pagina een aantal van deze script tags zetten met daar een code in zonder dat deze word uitgevoerd aan het begin van de pagina maar pas wanneer de each() deze triggert?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/05/2014 01:27:42
Quote Anchor link
Nee dat gaat niet en dat moet je ook niet willen. Gebruik in plaats daarvan een functie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
function doeiets(deze)
{
    alert(deze.html());
}

<script>
$("p").each(function( i ) {
    doeiets($(this));
})
</script>
 
Php knipper

php knipper

04/05/2014 09:59:26
Quote Anchor link
als ik voor iedere statistiek een functie schrijf dan weet de each toch niet welke functie hij moet starten?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/05/2014 10:16:10
Quote Anchor link
ah op die manier :-)

zoiets?
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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<p id="grafiek A">Grafiek - <span>Geanimeerd!</span></p>
<p id="grafiek B">Grafiek - <span>Geanimeerd!</span></p>

function doeiets1(deze)
{
    alert(deze.html());
}

function doeiets2(deze)
{
    alert(deze.html());
}

<script>
$("p").each(function( i ) {
    
    switch($(this).attr("id"))
    {
        case 'grafiek A':
              doeiets1($(this));
              break;
        case 'grafiek B':
              doeiets2($(this));
              break;
        default:
              break;
}})
</script>
 



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.