vraag over javascript css aan passen met waitForImages plug in.
het script is het volgende:
$('#container').waitForImages({
finished: function preload() {
$('#loader').style.display= 'none';
$('#container').style.display = 'block';
} waitForAll:true});
iemand suggesties
bijvoorbeeld dank
ralph
Gewijzigd op 06/02/2013 11:14:46 door Ralph van der Tang
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$('#container').waitForImages({
finished: function preload() {
$('#loader').style.display = 'none';
$('#container').style.display = 'block';
},
waitForAll: true
});
finished: function preload() {
$('#loader').style.display = 'none';
$('#container').style.display = 'block';
},
waitForAll: true
});
Zeg, ik ken waitForImages niet. Is daar een jQuery plugin voor nodig?
Waar heb je dat gevonden?
Dat klinkt wel interessant.
Gewijzigd op 06/02/2013 09:42:41 door Kris Peeters
src = https://github.com/alexanderdickson/waitForImages
Toevoeging op 06/02/2013 09:56:04:
maar werken ho maar XD
Dit lijkt perfect te werken.
Voor jouw code:
css kan je zo aanpassen:
$('#loader').css({display: 'none'});
Toevoeging op 06/02/2013 10:23:31:
ergens zit er bij mij dan nog een foutje want bij mij werkt het nog niet.
zal hier ook is mijn html weergeven waar het in moet komen :
<div class="home_coverflow_container">
<div class="home_coverflow_head">Ledenoverzicht</div>
<div id="container"> </div>
<div id="loader">
<img src="/images/preload/ajax-loader.gif" alt="">
<p>Loading ......</p>
</div>
</div>
in de div container komt een coverslide functie van jquery te staan deze moet dan opas weergegevn worden als alle fotos geladen zijn
Een werkend voorbeeld (pad van de plugin aanpassen...):
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
26
27
28
29
30
31
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
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="src/jquery.waitforimages.js"></script>
<script>
$(function() {
$('#container').waitForImages({
finished: function preload() {
$('#loader').css({display: 'none'});
$('#container').css({display: 'block'});
},
waitForAll: true
});
});
</script>
<style>
#container {
display: none;
}
#container img {
height: 250px;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.teachthought.com/wp-content/uploads/2012/08/einstein.jpg">
</div>
<div id="loader">Aan het laden</div>
</body>
</html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="src/jquery.waitforimages.js"></script>
<script>
$(function() {
$('#container').waitForImages({
finished: function preload() {
$('#loader').css({display: 'none'});
$('#container').css({display: 'block'});
},
waitForAll: true
});
});
</script>
<style>
#container {
display: none;
}
#container img {
height: 250px;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.teachthought.com/wp-content/uploads/2012/08/einstein.jpg">
</div>
<div id="loader">Aan het laden</div>
</body>
</html>
Gewijzigd op 06/02/2013 10:33:24 door Kris Peeters
Toevoeging op 06/02/2013 11:00:13:
ik heb nog wat syntax errors die ik moet oplossen
Toevoeging op 06/02/2013 11:11:51:
geen errors meer maar het werkt nog steeds niet
zal mijn code hier onder even posten:
het javascript
// waitForImage jquery plugin.
function waitForImages() {
var t = "waitForImages";
e.waitForImages = {
hasImageProperties: ["backgroundImage", "listStyleImage", "borderImage", "borderCornerImage"]
}, e.expr[":"].uncached = function (t) {
if (!e(t).is('img[src!=""]')) return !1;
var n = new Image;
return n.src = t.src, !n.complete
}, e.fn.waitForImages = function (n, r, i) {
var s = 0,
o = 0;
e.isPlainObject(arguments[0]) && (i = arguments[0].waitForAll, r = arguments[0].each, n = arguments[0].finished), n = n || e.noop, r = r || e.noop, i = !! i;
if (!e.isFunction(n) || !e.isFunction(r)) throw new TypeError("An invalid callback was supplied.");
return this.each(function () {
var u = e(this),
a = [],
f = e.waitForImages.hasImageProperties || [],
l = /url\(\s*(['"]?)(.*?)\1\s*\)/g;
i ? u.find("*").andSelf().each(function () {
var t = e(this);
t.is("img:uncached") && a.push({
src: t.attr("src"),
element: t[0]
}), e.each(f, function (e, n) {
var r = t.css(n),
i;
if (!r) return !0;
while (i = l.exec(r)) a.push({
src: i[2],
element: t[0]
})
})
}) : u.find("img:uncached").each(function () {
a.push({
src: this.src,
element: this
})
}), s = a.length, o = 0, s === 0 && n.call(u[0]), e.each(a, function (i, a) {
var f = new Image;
e(f).bind("load." + t + " error." + t, function (e) {
o++, r.call(a.element, o, s, e.type == "load");
if (o == s) return n.call(u[0]), !1
}), f.src = a.src
})
})
}
};
// hide layer functie.
function waitForImages(){
$('#container').waitForImages({
finished: function preload() {
$('#loader').css({display: 'none'});
$('#container').css({display: 'block'});
},
waitForAll: true
});
}
de html:
<div class="home_coverflow_container">
<div class="home_coverflow_head">Ledenoverzicht</div>
<div id="container"> </div>
<div id="loader">
<img src="/images/preload/ajax-loader.gif" alt="">
<p>Loading ......</p>
</div>
</div>
Iedereen stelt een vraag op dit forum, dus enige duidelijkheid zou wel op zijn plaats zijn.
Alvast bedankt...
Zet de images in
<div id="container"></div>
Zet een boodschap "Aan het laden" (of zo) in
<div id="loader"></div>
De werking:
#container is onzichtbaar (display: none) (dit doe je met css)
De images worden dus niet getoond; ze worden ook niet verplaatst.
Eens ze geladen zijn, wordt #container zichtbaar gemaakt en #loader onzichtbaar
Gewijzigd op 06/02/2013 11:28:36 door Kris Peeters
Toevoeging op 06/02/2013 11:53:05:
TypeError: $(...).waitForImages is not a function
is de error die ik krijg
Toevoeging op 06/02/2013 13:32:33:
iemand die mij hier mee kan helpen ??
Gewijzigd op 06/02/2013 12:27:53 door ralph van der Tang
En bouw zo alles op.
Toevoeging op 07/02/2013 11:48:34:
$(function (){
$(document).ready(function () {
$('#loader').css({display: 'block'})
});
});
$(function (){
$(window).load(function(){
$('#loader').css({visibility:'hidden', height:'0px', width:'0px' });
$('#container').css({display: 'block' });
})
}); doet t ook
Toevoeging op 07/02/2013 11:49:28:
heb nu alleen een ander probleem
moet eerst scrollen om de volledige functie te zien te krijgen hij laat na t laden het laatste plaatje zien
dus ik heb nog wat te puzzelen
Dat was toch het plan?
en waitForImages werkt perfect; het doet wat je van plan was.
Heb je dit trouwens in je code?
<script src="src/jquery.waitforimages.js"></script>
Maar dan met de src die overeen komt met het juiste pad en bestandsnaam.
Die lijn code moet trouwens staan tussen het laden van jQuery en het script met jouw werking.
(misschien kan je dat vermelden in dat andere topic, en zo verder gaan)
Toevoeging op 07/02/2013 12:36:03:
bedankt voor het helpen