Javascript .append（）将图像附加到转换时非常慢

我在手机上加载图像速度不够快时遇到问题。 我的项目有一个图像和一个按钮。单击按钮时，图像向下滑动，另一个图像从顶部滑动以替换它。这是密码

html

 <div class="main">

    <div id="myDiv1><img src="img1.jpg" width="100%"></div>
    <div id="myDiv2"></div>

</div>

js

它相当简单，可以在桌面上使用。但在手机上，当你点击#按钮时，第二张图像不会立即加载，因此你会在一秒钟内看到一张黑色图像，这完全破坏了我想要的效果。这在iPhone和iPad上都会发生。我还没有机会在安卓系统上进行测试，但你可能会认为售价700美元以上的苹果手机可以进行一点过渡；）我想知道我的代码是否有什么地方出错，导致了这个问题。这是我的第一个项目。谢谢你抽出时间

-------------------------------------------------------------------编辑------------------------------------------------------------

自从我发布这个问题以来，我已经尝试了很多事情。我尝试将“append”行移到“click”函数的外部，图像立即加载，这表明这个问题与append（）方法无关。我还尝试了一种不同的方法，通过使用display“none”立即加载图像，然后使用.css（“display”、“block”）而不是append。但我们还是看到了破坏我在手机上想要的效果的黑色图像。

---

如果您想亲自查看问题，请访问“alicesoyer.com”。该场地处于活动状态，但正在施工中。您需要单击屏幕上的任意位置来启动动画。你会看到我想要的效果。在桌面上，它工作正常。在手机上则不然。我正在iPad air和iPhone6上进行测试。谢谢。

您所做的可能不会预加载图像，因为您尚未将其附加到DOM

您可以将其附加到页面外，以便在加载时，它已被缓存：

var preloadDiv = $("<div></div>")
    .css({
        position: "absolute",
        left: -10000
    })
    .append('<img src="img2.jpg">')
    .appendTo(document.body);
 var image 2 = preloadDiv.find("img");

解决办法是增加

    * {
        -webkit-transform: translate3d(0,0,0);
    }

或者至少对一些子元素触发浏览器以更好地使用硬件加速。 更多信息请参见第页

---更新：像这样（仅在动画上）应该足够了，并且可能会解决新的IPad问题：

.moveFromTop {
    animation: moveFromTop 2s ease both;
    -webkit-transform: translate3d(0,0,0);
}

.moveToBottom {
    animation: moveToBottom 2s ease both;
    -webkit-transform: translate3d(0,0,0);
}

---

我的建议是，不要将其附加到DOM中，而是在一开始就将其包括在内。但这是如果您愿意在init上增加额外的负载

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'#myDiv1'）.addClass（'moveToBottom'）；
$（'myDiv2>img'）.css（{dislay:'block}）；
$（'#myDiv2'）.addClass（'moveFromTop'）；
});
});
#myDiv2>img{display:none}
.从顶部移动{
动画：从顶部移动两个；
}
moveToBottom先生{
动画：moveToBottom 2s同时轻松播放；
}
@关键帧从顶部移动{
从{}
到{transform:translateY（-100%）；}
}
@关键帧移动到底部{
从{}
到{transform:translateY（100%）；}
}

切换
预加载第二个img？这不是我在js文件的前两行中所做的吗？不，你在分配源代码，但没有加载它。@Paul:可能不是。但是如果你把它附加到屏幕外的页面上，它应该被预加载。上面有很多打字错误。确保你的问题清楚，代码正确，这是值得的。您为图像使用了两个不同的变量名，将
$
置于
ready
调用的开头，将
置于左侧结束…（如果你看到上面乱七八糟的引号，点击刷新。）嗨，谢谢你的输入。我试过了，但图像加载速度仍然太慢。嗨，谢谢你的回答。我已经试过了，iPhone现在运行得很好。当我为iPad做这件事（使用媒体查询）时，它完全打乱了我的布局，背景图像的大小发生了变化，出现在前景中。我现在正在研究它，一旦我开始工作，我会接受你的答案作为一个很好的解决方案。嗨，试着只在你的两个动画类（moveFromTop、moveToBottom）中使用它，而不是在所有元素（*）上使用它
$("#myDiv2").append(image2);
preloadDiv.remove();

    * {
        -webkit-transform: translate3d(0,0,0);
    }

.moveFromTop {
    animation: moveFromTop 2s ease both;
    -webkit-transform: translate3d(0,0,0);
}

.moveToBottom {
    animation: moveToBottom 2s ease both;
    -webkit-transform: translate3d(0,0,0);
}