关于img.onload问题

Question

                    for(var i=0;i<allImage.length;i++){

                        var img = new Image();

                        img.src = 'data:image/jpeg;base64,' + allImage[i];

                        img.onload = function(){

                            if(img.width/img.height >= 1){

                                smallImage.push(img.src);

                            }else{

                                var bigImg = document.createElement("img");

                                bigImg.src=img.src;

                                console.log(bigImg);

                                var myDiv = document.getElementById('myDiv');

                                myDiv.appendChild(bigImg);

                            }

                        };

                    }

                    我这样循环之后，为什么出来的图片都是同一张，不知道是不是img.onload这边出了问题，有大神可以解释一下吗？我是想通过循环来判断图片的寬高，但是必须要使用onload才可以获取到寬高，但是这样出了一个问题就是打印出来的bigImg都是同一张图片，有没有大神指导一下

Answer 1

js运行的机制是主线程的同步运行时，将同步代码产生的异步任务推入任务队列中，同步代码执行完毕后再依次执行异步任务。而for循环是同步进行的，img.onload是异步的，每次img.onload没有执行就被下一个onload覆盖了，所以for循环执行完毕后只剩下最后一个异步的onload。