.append() 将图像附加到过渡非常慢答案

【问题标题】：.append() very slow to attach image to transition.append() 将图像附加到过渡非常慢
【发布时间】：2017-04-09 23:28:51
【问题描述】：

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

html

 <div class="main">

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

</div>

css

.moveFromTop {
    animation: moveFromTop 2s ease both;
}

.moveToBottom {
    animation: moveToBottom 2s ease both;
}

@keyframes moveFromTop {
    from { transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { transform: translateY(100%); }
}

var img2 = new Image(); 

img2.src = "img2.jpg";

$(img2).css("width","100%");

$(document).ready( function () {


    $('#button').click(function(){

        $('#myDiv1').addClass('moveToBottom');

        $("#myDiv2").append(img2);

        $('#myDiv2').addClass('moveFromTop');
   });
});

它相当简单，可以在桌面上运行。但是在移动设备上，当您单击#button 时，第二张图片不会立即加载，因此您会得到一秒钟的黑色图片，这完全破坏了我想要的效果。这在 iPhone 和 iPad 上都会发生。我还没有机会在 android 上进行测试，但你会认为 700 美元以上的苹果手机可以处理一点过渡；）我想知道我的代码是否有问题导致这个问题.这是我的第一个项目。感谢您的宝贵时间。

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

自从我发布这个问题以来，我已经尝试了很多事情。我尝试将“附加”行移到“单击”函数之外，图像立即加载，指出这个问题与 append() 方法没有任何关系。我还尝试了一种不同的方法，通过显示“none”立即加载图像，然后执行 .css("display","block") 而不是追加。我们仍然得到破坏我在移动设备上的效果的黑色图像。如果您想亲自查看问题，请访问“alicesoyer.com”。该网站已上线，但正在建设中。您需要单击屏幕上的任意位置来启动动画。你会看到我想要的效果。在桌面上它工作正常。在移动端它没有。我在 iPad air 和 iPhone6 上进行测试。谢谢。

【问题讨论】：

预加载第二张图片？
这不是我在 js 文件中的前两行所做的吗？
不，您正在分配源，但没有加载它。
@Paul：可能不会。但是如果你将它附加到页面上，在屏幕外，它应该会被预加载。
上面有很多错别字等。值得您花时间确保您的问题清楚且其中的代码正确。您为图像使用了两个不同的变量名称，将$ 留在了ready 调用的开头，将); 留在了结尾...

标签： javascript jquery html css append

【解决方案1】：

解决办法是添加

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

或者至少对一些子元素触发浏览器更好地使用硬件加速。更多信息在this页面

---更新：像这样（即仅在动画上）应该就足够了，并且可能会解决新的 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);
}

【讨论】：

您好，感谢您的回答。我已经尝试过了，iPhone 现在可以完美运行了。当我为 iPad 做这件事（使用媒体查询）时，它完全弄乱了我的布局，背景图像改变了大小并进入了前景。我现在正在研究它，一旦我得到它的工作，我会接受你的回答作为一个很好的解决方案。
嗨，试着把它只放在你的 2 个动画类（moveFromTop、moveToBottom）中，而不是放在所有元素上（*）

【解决方案2】：

您正在执行的操作可能不会预加载图像，因为您尚未将其附加到 DOM。

您可以将它附加到页面外，这样当您加载它时，它已经被缓存了：

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

那么在展示的时候：

$("#myDiv2").append(image2);
preloadDiv.remove();

【讨论】：

（如果您在上面看到混乱的引号，请点击刷新。）
您好，感谢您的意见。我已经尝试过了，但图像加载速度仍然太慢。

【解决方案3】：

我的建议是，与其将其附加到 DOM 中，不如将其包含在开头。但前提是您愿意在 init 上增加额外的负载。

$(document).ready( function () {
    $('#button').click(function(){
        $('#myDiv1').addClass('moveToBottom');
        $('#myDiv2 > img').css({dislay:'block'});
        $('#myDiv2').addClass('moveFromTop');
   });
});

#myDiv2 > img { display:none }
.moveFromTop {
    animation: moveFromTop 2s ease both;
}

.moveToBottom {
    animation: moveToBottom 2s ease both;
}

@keyframes moveFromTop {
    from {}
    to { transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from {}
    to { transform: translateY(100%); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    <div id="myDiv1">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=IMG1&w=350&h=150" width="100%">
    </div>
    <div id="myDiv2">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=IMG2&w=350&h=150" width="100%">
    </div>
</div>

<button id="button">Toggle</button>

【讨论】：