Question

我是一个绝望的javascript新手，我试图将动态创建的图像元素插入到DOM中，同时定位和随机旋转它们。

目前我基本上是这样做的：

创建包含所有图像文件路径的数组
使用动态创建的名称创建div并插入DOM
生成20个不同的图像实例，并将DOM插入相应的div
随机旋转每个图像并随机定位每个图像。为了轮换，我使用jQuery旋转插件。

我有一种感觉，我正以非常愚蠢的方式做这一切，因为我首先将元素插入DOM，然后操纵它们的位置和旋转。

有没有办法先在虚拟内存中执行所有操作，最后在完成所有操作后将元素插入DOM？

这是我目前的代码（对于noobish质量抱歉）：

$(document).ready(function(){

var wrapper = $('#wrapper'),


function movieCreator(movieName, generateAmount){

var contents=new Array (

'<img class="film '+movieName+'" src="images/'+movieName+'01.png" alt="'+movieName+'" />',

'<img class="film '+movieName+'" src="images/'+movieName+'02.png" alt="'+movieName+'" />',

'<img class="film '+movieName+'" src="images/'+movieName+'03.png" alt="'+movieName+'" />',

'<img class="film '+movieName+'" src="images/'+movieName+'04.png" alt="'+movieName+'" />',

'<img class="film '+movieName+'" src="images/'+movieName+'05.png" alt="'+movieName+'" />',

'<img class="film '+movieName+'" src="images/'+movieName+'06.png" alt="'+movieName+'" />',

'<img class="film '+movieName+'" src="images/'+movieName+'07.png" alt="'+movieName+'" />'   

);

var tmp='';
var dynamicIdName = 'box'+movieName;
var dynamicIdCall = '#box'+movieName;
wrapper.append("<div id='"+dynamicIdName+"' class='moviebox'></div>");


var random
for (i=0; i < generateAmount;){
random = Math.floor(Math.random()*contents.length);
tmp += contents[random];
i++
};

$(dynamicIdCall).append(tmp);

$(".film").each(function(){ 
    randomrot = Math.floor(Math.random()*360); 
    randomposX = Math.floor(Math.random()*200); 
    randomposY = Math.floor(Math.random()*200); 
    $(this).rotate(randomrot);
    $(this).css({'top': randomposY -40});
    $(this).css({'left': randomposX -40});

});


    wrapper.on('click','.film',function(){
    imageControl(this);
    });



} //end movieCreator

    movieCreator('terminator', 20);
    movieCreator('rambo', 20);
    movieCreator('godfather', 20);
    movieCreator('matrix', 20);
    movieCreator('kingkong', 20);


}); //dom ready

Answer 1

我试图在这里介绍很多东西......

您有意外的,：

var wrapper = $('#wrapper'),
                        ---^

您可以使用[]代替new Array()：

var contents = [ ... ]

小心，i是全球性的，请使用var。此外，您可以将i++移至for循环：

for (var i = 0; i < generateAmount; i++){
   ---^---                       ---^---

这些是常见的初学者错误。首先尝试掌握这些概念，然后如果想要获得最佳性能，最后添加所有内容。然后你可以重构一切，我评论了一些事情：

var $wrap = $('#wrapper')

var movieCreator = function (name, ammount) {

  // Utility function to keep it DRY
  var rand = function (len) {
    return ~~(Math.random() * len) // ~~ trick Math.floor
  }

  // Cache your container in a variable
  var $container = $('<div/>', {
    id: 'box' + name,
    'class': 'moviebox'
  })

  // Generate iamges with an array
  // to keep it DRY
  var imgs = []
  for (var i = 0; i < 7; i++) {
    imgs.push(
      '<img ' +
      'class="film '+ name +'"'+
      'src="images/'+ name +'0'+ i + '.png"'+ // If no with more than 10...
      'alt="'+ name +'"'+
      '/>'
    )
  }

  var randImgs = []
  for (var i = 0; i < ammount; i++)
    randImgs.push(imgs[rand(imgs.length)])

  // Attach events before inserting in DOM
  // that way you don't need delegation with on()
  var $imgs = $(randImgs.join(''))
  $imgs
  .click(function(){
    imageControl(this)
  })
  .each(function(){
    var rot = rand(360),
        posX = rand(200),
        posY = rand(200)
    $(this)
      .css({
        top: posY - 40 + 'px', // use units (px, em)
        left: posX - 40 + 'px'
      })
      .rotate(rot)
  })

  // Finally insert in DOM. It already has
  // all events attached and position changed
  $wrap.append($container.append($imgs))
}

在追加之前修改元素位置和旋转

1 个答案: