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: http://www.struckaxiom.com/work. 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);
    image.style.visibility = "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
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()} 
// -->

</script>

Thanks!

回答1:

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);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}

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

Live test case with cute cats: http://jsfiddle.net/yahavbr/e863X/ :-)

回答2:

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);
    container.style.visibility = "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.

回答3:

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.

来源：https://stackoverflow.com/questions/5114828/multiple-image-fadein-onload-at-the-same-time

标签

javascript

image

function

fadein

onload