javascript - 在附加之前修改元素位置和旋转

Question

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

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

1. 创建一个包含所有图像文件路径的数组
2. 使用动态创建的名称创建一个 div 并插入到 DOM
3. 生成 20 个不同的图像实例并插入到 DOM 中相应的 div
4. 将每个图像旋转随机量并随机放置每个图像。对于旋转，我使用 jQuery 旋转插件。

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

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

这是我当前的代码(抱歉，菜鸟质量):

$(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))
}