Question

您好，我正试图制作一个精美的照片库，其中图像加载有一些动画可以让它们显示，

问题是图像加载速度太快以至于效果同时发生并且看起来不正确。

所以

我试图将它们排成一个数组，并获得一个重复的脚本，一次显示一个。

我做了一个尝试，但它确实有效。

到目前为止我所做的一切。

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" ></script>

<script>

$(document).ready(function() {

   $imagesloader = Array();

   $('.tile img').load(function() {
          $(this).css('display', 'none');
          $imagesloader.push(this);
    });

    setInterval(function(){ 

        if($imagesloader.lenght > 0)
        {
          $($imagesloader[0]).show('slide');
          $imagesloader.shift();

        }
    },500)

});



</script>

<style>

.tile {
background-color: #CCC;
margin: 5px 0px 0px 5px;
position: absolute;
overflow:hidden;
}

.tile img {
  width:100%;
  height:auto;
}

.h1 {height:125px;}
.h2 {height:255px;}

.w1 {width:190px;}
.w2 {width:385px;}

.t1 {top:0px;}
.t2 {top:130px;}
.t3 {top:260px;}
.t4 {top:390px;}

.l1 {left:0px;}
.l2 {left:195px;}
.l3 {left:390px;}
.l4 {left:585px;}



.container {
width: 980px;
background: #999;
height: 1000px;
position:relative;

}
</style>

<body>

    <div class="container">
        <div class="tile w2 h2 t1 l1">
           <img src="Penguins.jpg" />
        </div>
        <div class="tile w1 h1 t1 l3">
           <img  src="Chrysanthemum.jpg" />
        </div>
        <div class="tile w1 h1 t1 l4">
           <img  src="Desert.jpg" />
        </div>
        <div class="tile w2 h2 t2 l3">
             <img  src="Hydrangeas.jpg" />
        </div>
        <div class="tile w1 h1 t3 l1">
             <img  src="Jellyfish.jpg" />
        </div>
        <div class="tile w1 h1 t4 l1">
              <img  src="Koala.jpg" />
        </div>
        <div class="tile w1 h2 t3 l2">
              <img  src="Tulips.jpg" />
        </div>
        <div class="tile w1 h1 t4 l3">
              <img  src="Tulips.jpg" />
        </div>
        <div class="tile w1 h1 t4 l4">
              <img  src="Tulips.jpg" />
        </div>

    </div>


</body>
</html>

将图像加载一个

0 个答案: