JAVASCRIPT-JS Create an IMG tag based on the number of SRC?

HTML section:

JS Code:

  function preloader(){          // create object        imageObj = new Image();        // set image list                images = new Array();        images[0]="image1.jpg";        images[1]="image2.jpg";        images[2]="image3.jpg";        images[3]="image4.jpg";        // start preloading        for(var i=0; i<=3; i++){            var imageObj = new Image();            imageObj.src=images[i];            console.log(imageObj.src);            document.getElementsByTagName('img')[i].setAttribute('src',imageObj.src);        }    }

Display effect:

Problem:
Preloader () This method dynamically set SRC, then the HTML of the IMG element can be based on the number of SRC to create how many img it?
Generally in the creation of dynamic images of the need to solve the problem?
Ask for ideas or suggestions!

Reply content:

HTML section:

JS Code:

  function preloader(){          // create object        imageObj = new Image();        // set image list                images = new Array();        images[0]="image1.jpg";        images[1]="image2.jpg";        images[2]="image3.jpg";        images[3]="image4.jpg";        // start preloading        for(var i=0; i<=3; i++){            var imageObj = new Image();            imageObj.src=images[i];            console.log(imageObj.src);            document.getElementsByTagName('img')[i].setAttribute('src',imageObj.src);        }    }

Display effect:

Problem:
Preloader () This method dynamically set SRC, then the HTML of the IMG element can be based on the number of SRC to create how many img it?
Generally in the creation of dynamic images of the need to solve the problem?
Ask for ideas or suggestions!

1. Print the image src source first;

2. Created based on SRC source

3. will be placed in the target DOM.

  function preloader(){          // set image list        var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];        // start preloading        for(var i=0; i<=images.length-1; i++){            var img= new Image();            img.src=images[i];            document.getElementsByClassName("comb")[0].appendChild(img);        }    }

Change the preloader dynamically directly into the DOM Preloader create an IMG string, insert multiple IMG strings as innerHTML into the DOM

If you use the MVVM framework, it's better to solve it. Model generated how much src, view automatically repeat loop loading img image

Do not use the template mode, active repeat loop loading img image

Make a div, put an img tag on it, and create it based on the number of pictures you get. However, it is very strange to write, if the static page is not a good solution, you can refer to the next backbone.js, should have some help group

