Show div after individual image loads
Solution 1
<div class="image"><img src="http://acupuncture.celeboutfit.com/images/img/IMG_5400m-1.jpg" alt="" />image1</div>
<div class="image"><img src="image2.jpg" alt="" />image2</div>
<div class="image"><img src="image3.jpg" alt="" />image3</div>
<script type="text/javascript">
$(document).ready(function(){
$("div.image").hide();
$("div.image").find("img").load(function(){
$(this).closest("div.image").show(500);
});
});
</script>
Working example: http://jsfiddle.net/peeter/qwtWZ/6/
Solution 2
$(".image img").load(function()
{
$(this).closest(".image").show();
});
Edit: Updated to allow for images that are descendants, but not necessarily children.
Solution 3
$(document).ready(function(){
$('img').load(function(){
$(this).parent().show();
});
});
should work just fine !
Solution 4
You could load the images using jQuery like so
$("#img1").load('image1.jpg',function(){ $("#img1").show(); });
$("#img2").load('image2.jpg',function(){ $("#img2").show(); });
$("#img3").load('image3.jpg',function(){ $("#img3").show(); });
Where you give the above IDs to your divs. The function in the load() function is called when the resource has finished loading.
See http://api.jquery.com/load/ for the function reference.
Joonas
Some projects: ScriptUI Dialog Builder Audible Library Extractor GW 2 crafting guide
Updated on June 04, 2022Comments
-
Joonas almost 2 years
Lets say I have this kind of set of images:
<div class="image"><img src="image1.jpg" alt="" />image1</div> <div class="image"><img src="image2.jpg" alt="" />image2</div> <div class="image"><img src="image3.jpg" alt="" />image3</div>
(note that the
div
s would be initially hidden)What I want is that, after an individual
<image>
has loaded,.show();
thediv.image
surrounding it.I would think this would be easy to do but I have searched all over the internet and so far they've been about doing something after all images have loaded instead of individual images.
Is this even possible to do?
Edit: It was later on changed so that there's also link around the image Working example: http://jsfiddle.net/peeter/qwtWZ/6/