Javascript 在附加之前修改图元的位置和旋转

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

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

创建包含所有图像文件路径的数组

使用动态创建的名称创建一个div并插入到DOM中

生成20个不同的图像实例，并将其插入到DOM中相应的div中

按随机数量旋转每个图像，并随机定位每个图像。对于旋转，我使用jQuery旋转插件

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

是否有一种方法可以首先在虚拟内存中完成所有操作，然后在所有操作完成后将元素插入DOM

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

$（文档）.ready（函数（）{
var wrapper=$（“#wrapper”），
函数movieCreator（movieName，generateAmount）{
var contents=新数组(
'',
'',
'',
'',
'',
'',
''   
);
var tmp=''；
变量dynamicIdName='box'+movieName；
var dynamicIdCall='#box'+movieName；
包装器。附加（“”）；
随机变量
对于（i=0；i

我想在这里介绍很多东西

您有一个意外的

，

：

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

您可以使用

[]

而不是

新数组（）

：

小心，

i

是全局的，请使用

var

。此外，您还可以将

i++

移动到

for

循环：

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

for（变量i=0；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))
}

var$wrap=$（“#wrapper”）
var movieCreator=函数（名称、数量）{
//实用功能，保持干燥
var rand=函数（len）{
返回~~（Math.random（）*len）/~~trick Math.floor
}
//将容器缓存在变量中
变量$container=$（“”{
id:'框'+名称，
'class'：'moviebox'
})
//使用数组生成IAMGE
//保持干燥
var imgs=[]
对于（变量i=0；i<7；i++）{
推(
''
)
}
var randImgs=[]
对于（变量i=0；i

JavaScript已经在客户端使用内存，但在加载时或之后通过JavaScript以某种方式呈现元素在页面上之前，在它们以某种形式存在于DOM中之前，您无法对它们进行操作。也就是说，您的实际问题是什么，这不是加载？中断？变成长？freezin启动浏览器？other？它不是虚拟内存，但您可以创建一个与DOM分离的DOM元素，并在其上执行任何您喜欢的操作。如果使用jQuery创建元素，您可以获得包装在jQuery中的元素，您可以将jQuery函数应用到该元素。但是，无法执行要求元素位于布局中的功能，例如获取heig元素的ht。应用CSS将起作用，但不确定是否旋转，如果只是设置CSS，它也应该起作用。@chris我想问题是我当前的代码太长了。客户端可以清楚地看到正在创建和操作的元素。我尝试应用这些$（this.rotate（randomrot）；$（this.CSS（{'top'：randomposY-40}）；$（this.css（{'left'：randomposX-40}）；转换为“tmp”变量，而不是获取$（'.film'））类，但这会导致控制台错误，告知image元素没有rotate方法。好吧，我不会说您没有太多的工作要做，您是否考虑过使用所需的属性在服务器端渲染图像，类似于现在使用javascript进行渲染。可能先将图像加载到DOM中，然后调用rotate on他们可能会加快速度。非常感谢您的善意帮助！感谢您花时间解释这些事情。我现在将尝试插入改进后的代码，看看它是否有效！我更改了一些内容，但我建议不要复制/粘贴，而是亲自编写，并尝试每一段代码，看看它能做什么。有很多可能性这是一个全新的概念。完成了测试，它就开始工作了！这是一个很大的改进，感谢你对我的教育！从代码中有一件事我不明白：为什么你要创建一个带有美元符号var$container的容器变量？仅仅var container有什么区别？顺便说一句，我觉得我必须表达我的敬畏之情带着你的答案。你到底怎么能把这么复杂的一段代码换成新的呢

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