请教火狐下的图片预加载

Question

for(var x=start; x<end; x++){  // 循环开始
        var loadNums = 0
        if(newImgArr[x]){
          imgLoad[n] = new Image()
          imgLoad[n].onload = function(){  // 判断是否加载图片完成
            loadNums++
            if(loadNums == nums){  // 本次循环的图片全部完成
              console.log('完成一组')
              start = start + nums  // 改变索引
              end = start + nums
              // setTimeout(loadImgFun, 3000, start, end, nums)  // 计时器，测试使用 看的更直观一些
              loadImgFun(start,end,nums)  // 开始下次循环
            }
          }
          imgLoad[n].onerror = function (){
            alert('img loading error!' + newImgArr[x]);
          }
          imgLoad[n].src = picUrl + newImgArr[x]
          imgList.appendChild(imgLoad[n])
          n++
        }
      }

var div = document.createElement('div')
              div.className = 'pic'
              div.setAttribute("id","pic" + z)
              div.appendChild(imgLoadArr[z-1])
              self.newBox.appendChild(div)

最近的项目需要做个图片的预加载，大概两千多张图吧，想实现的效果是，鼠标滚动，图片可以快速的切换并且不顿挫，在chrome中是正常的，但火狐中，始终在切换的时候有切换顿挫的问题，在控制台看图片已经下载了，尝试把图片插入到dom中，用visibility: hidden隐藏，没有解决问题
但鼠标滑动过的图片，在回来从新切换，就是ok的，这个和火狐的渲染机制有关系吗？哪位大神可以指点下？

Answer 1

当 Image 实例对象 赋值或修改 src属性的时候 （也就是 这里 imgLoad[n].src = picUrl + newImgArr[x]）浏览器已经开始加载图片。

更多的可能是 css 的问题吧？
比如动态修改dom的时候前后布局变化之类的。

这个只能你具体分析了。

建议是 可以考虑先把盒子模型撑开，确保有图片和没图片的时候表现一致。