加载排序图片

Question

I have some pictures I want them to have to organize the page every 10 seconds. 我有一些图片，希望他们每10秒整理一次页面。

As follows: 如下：

Photo 1 fully loaded 照片1满载
Wait 10 seconds 等待10秒
After photo 1, photo 2 is fully loaded 照片1之后，照片2已满载
Wait 10 seconds 等待10秒
After Photo 2, Photo 3 is fully loaded 照片2之后，照片3已完全加载
Wait 10 seconds 等待10秒

, ... ，...

Until we finish all photos. 直到我们完成所有照片。

my problem : 我的问题：

method load don't work & i don't know method for waiting 方法加载不起作用＆我不知道等待方法

Here is my code: 这是我的代码：

<html>
<head>
    <title></title>
    <script type="text/javascript" src='jq.js'></script>
</head>
<body>
    <div></div>
    <script type="text/javascript">
        var images=["images/0.jpg",
                    "images/1.jpg",
                    "images/2.jpg",
                    "images/3.jpg",
                    "images/4.jpg",
                    "images/5.jpg",
                    "images/6.jpg",
                    "images/7.jpg",
                    "images/8.jpg",
                    "images/9.jpg",
                    "images/10.jpg"
                ];
        for (var i=0;i<images.length;i++){
            var imgtag = '<img src='+images[i]+' />';
            $(imgtag).load(function() {
                $('div').append(imgtag);
                //Wait 10 sec   ==> Is there a function to Waiting :-??
            }
       }
    </script>
</body>
</html>

Thanks for your response. 感谢您的答复。

Answer 1

First, you need to wait for the DOM ready event, then use a recursive callback : 首先，您需要等待DOM ready事件，然后使用递归回调：

$(function() {   // on DOM ready

var images = [
    "images/0.jpg",
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
    "images/4.jpg",
    "images/5.jpg",
    "images/6.jpg",
    "images/7.jpg",
    "images/8.jpg",
    "images/9.jpg",
    "images/10.jpg"
];

(function loadImg(index) {
    if (index >= images.length) return;  // no more image to load

    $('#divId').append( $('<img />').attr('src', srcImg).load(function() {
        // invoke this function again in 10 secs incrementing index by 1
        setTimeout(function() { loadImg(index + 1); }, 10000);
    }) );

})(0);   // initiate loading sequence with first image index

});

Answer 2

Use setInterval function. 使用setInterval函数。

var images=["images/0.jpg",
                    "images/1.jpg",
                    "images/2.jpg",
                    "images/3.jpg",
                    "images/4.jpg",
                    "images/5.jpg",
                    "images/6.jpg",
                    "images/7.jpg",
                    "images/8.jpg",
                    "images/9.jpg",
                    "images/10.jpg"
                ];
var count = 0;
function loadImage() {
  if (count < images.length) {
    var imgtag = '<img src='+images[count]+' />';
    $('div').append(imgtag);
    count++;
  }
}

setInterval(loadImage, 10000);

加载排序图片

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-01-16 12:15:32

解决方案2
0 2013-01-16 11:57:13

加载排序图片

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-01-16 12:15:32

解决方案2 0 2013-01-16 11:57:13

解决方案1
1 已采纳 2013-01-16 12:15:32

解决方案2
0 2013-01-16 11:57:13