Image pas loaden als mousover is.
Ik heb een slome website en dat komt doordat er veel afbeeldingen zijn. Deze afbeeldingen zijn niet in mij bestanden opgeslagen en deze afbeeldingen zijn gehide door jqeury. Ze worden alleen zichtbaar als je mousover doet op een tekst.
Nu is mij om de afbeelding te laden als iemand op die image doet. Dus niet dat die al geladen is maar pas laadt als iemand mousover doet.
Ik gebruik deze code:
Quote:
<script type="text/javascript">
jQuery (function ($) {
var $img = $(".imgg",this);
var $text = $("#gamingcontainer",this);
$img.hide();
$text.mouseover(function (e){
$(".imgg",this).show();
$("#gamingcontainer", document).mousemove(function(e) {
$(".imgg",this).offset({
left: e.pageX,
top: e.pageY + 20
});
});
}).mouseleave(function() {
$(".imgg",this).hide();
}); });
</script>
jQuery (function ($) {
var $img = $(".imgg",this);
var $text = $("#gamingcontainer",this);
$img.hide();
$text.mouseover(function (e){
$(".imgg",this).show();
$("#gamingcontainer", document).mousemove(function(e) {
$(".imgg",this).offset({
left: e.pageX,
top: e.pageY + 20
});
});
}).mouseleave(function() {
$(".imgg",this).hide();
}); });
</script>
en deze gebruik ik in html:
Quote:
<html><body><div id='gamingcontainer'><div id='popugame".$n."'><a class='thumbnail' href='$link2'><h4>$title2</h4></a></div><img src='$image2' class='imgg' height='100px' width='150px' /></div></body></html>
Gewijzigd op 18/02/2013 15:12:21 door Daniyal hussain
1) ik heb een image gemaakt, genoemd "empty.png". Die is heel klein, bv. 1 pixel
2) zie code ...
We zetten de src in een extra attribute: data-src.
Die wordt gelezen bij mouseover, en wordt dan gezet als echte scr.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#thumbnails img {
width: 130px;
height: 130px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var images = $('#thumbnails img');
images.mouseover(function(e) {
// de image waar de gebruiker over staat, is "this"
if ($(this).attr('src') === 'empty.png') {
var new_src = $(this).data('src'); // haalt de waarde van data-src
$(this).attr('src', new_src);
}
})
});
</script>
<div id="thumbnails">
<img src="empty.png" data-src="http://upload.wikimedia.org/wikipedia/en/thumb/8/86/Einstein_tongue.jpg/220px-Einstein_tongue.jpg">
<img src="empty.png" data-src="http://www.biography.com/imported/images/Biography/Images/Profiles/E/Albert-Einstein-9285408-1-402.jpg">
<img src="empty.png" data-src="http://upload.wikimedia.org/wikipedia/commons/f/f5/Einstein_1921_portrait2.jpg">
<img src="empty.png" data-src="http://www.physics.uiowa.edu/adventure/spring_2005/einstein/einstein.jpg">
</div>
#thumbnails img {
width: 130px;
height: 130px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var images = $('#thumbnails img');
images.mouseover(function(e) {
// de image waar de gebruiker over staat, is "this"
if ($(this).attr('src') === 'empty.png') {
var new_src = $(this).data('src'); // haalt de waarde van data-src
$(this).attr('src', new_src);
}
})
});
</script>
<div id="thumbnails">
<img src="empty.png" data-src="http://upload.wikimedia.org/wikipedia/en/thumb/8/86/Einstein_tongue.jpg/220px-Einstein_tongue.jpg">
<img src="empty.png" data-src="http://www.biography.com/imported/images/Biography/Images/Profiles/E/Albert-Einstein-9285408-1-402.jpg">
<img src="empty.png" data-src="http://upload.wikimedia.org/wikipedia/commons/f/f5/Einstein_1921_portrait2.jpg">
<img src="empty.png" data-src="http://www.physics.uiowa.edu/adventure/spring_2005/einstein/einstein.jpg">
</div>
Gewijzigd op 18/02/2013 15:18:41 door Kris Peeters
Ward er komt een apart tablet website.