Multiple Image fadeIn onLoad (at the same time)

I want to fade in multiple images at the same time as the page loads. Just like this website does it: I have the script to do it only on one image, but I want to have more images included. This is the single photo script. Please help.

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); function initImage() { imageId = 'thephoto' image = document.getElementById(imageId); setOpacity(image, 0); = "visible"; fadeIn(imageId,ImageId2,0); } function fadeIn(objId, opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror = opacity/100; // Older Mozilla and Firefox = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 = opacity/100; } window.onload = function() {initImage()} // --> </script>



Simple array and loop are all you need.

First, add such array on top of the code:

var images = [ "thephoto1", "thephoto2", "thephoto3" ];

(With the ID of all desired images)

Next change the function name to initImages to reflect the fact it will initialize more than one image and finally add that loop:

function initImages() { for (var i = 0; i < images.length; i++) { imageId = images[i]; image = document.getElementById(imageId); setOpacity(image, 0); = "visible"; fadeIn(imageId, 0); } }

That's it, no need to touch the other functions.

Live test case with cute cats: :-)


You could just wrap all of your images in a single container like this:

<div id="imageContainer"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img2.jpg"> </div>

Change your CSS to this:

<style type='text/css'>#imageContainer {visibility:hidden;}</style>

Change your first function to this:

function initImage() { containerId = 'imageContainer' container = document.getElementById(containerId); setOpacity(container, 0); = "visible"; fadeIn(containerId,0); }

By running the fading effect on the container you can then add as much content to the container and it will all fade in together and you never have to update your code.


The way they are doing is using jQuery (an excellent implementation). All of the images are in the same container and are selected using the jQuery class selector. Then they fade in all elements that fit within the viewable area. Their js file is not minimized so you could reverse engineer most of that functionality. The important thing to note is not that it is showing each row at a time but every element that fits in the viewing area. Their key function looks like this:

var elTop = $(el).offset().top - $(window).scrollTop(); var elHeight = $(el).height(); // if between top of footer and top of window if (elTop + elHeight > 40 && elTop < $(window).height()) { if ($.inArray($(el).attr("data-unique-id"), elementsInView) < 0) { addToView(el); } } else { if ($.inArray($(el).attr("data-unique-id"), elementsInView) >= 0) { removeFromView(el); } }

addToView and removeFromView add and remove the element from an array, then fade is executed on the array.

人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:Multiple Image fadeIn onLoad (at the same time)