1

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

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

  1. 创建一个包含所有图像文件路径的数组
  2. 使用动态创建的名称创建一个 div 并插入 DOM
  3. 生成20个不同的图片实例并插入到DOM中对应的div
  4. 随机旋转每个图像并随机定位每个图像。对于旋转，我使用 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
4

1 回答 1

0

我试图在这里涵盖很多东西......

你有一个意想不到的,：

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))
}
于 2012-07-29T04:29:42.097 回答