javascript - js 根據src的數量建立img標籤？

html部分：

JS代碼:

  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);        }    }

顯示效果：

問題：
preloader()這個方法動態設定了src，那麼html中的img元素能不能根據src的數量有多少就建立多少個img呢？
一般在做動態建立圖片這種需求都是怎麼解決的？
求思路或建議！

回複內容：

html部分：

JS代碼:

  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);        }    }

顯示效果：

問題：
preloader()這個方法動態設定了src，那麼html中的img元素能不能根據src的數量有多少就建立多少個img呢？
一般在做動態建立圖片這種需求都是怎麼解決的？
求思路或建議！

1. 先列印圖片src源；

2. 根據src源建立

3. 將放置到目標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);        }    }

把preloader動態直接修改dom換成 preloader先建立img 字串，把多個img字串作為innerHTML再插入到dom中

如果用mvvm架構的話，比較好解決。 model產生了多少的src, 視圖自動repeat 迴圈載入img圖片

要不採用模板的方式，主動repeat 迴圈載入img圖片

做一個div,裡面放img標籤就可以了，根據你獲得的圖片數量建立。不過這樣寫很奇怪，如果是靜態頁面沒有太好的解決方式，可以參考下backbone.js，應該有所幫組

