Question

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

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

JS

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

它相当简单，适用于桌面。但是在移动设备上，当您单击＃按钮时，第二个图像不会立即加载，因此您会获得一秒钟的黑色图像，这完全破坏了我想要的效果。在iPhone和iPad上都会发生这种情况。我还没有机会在Android上进行测试，但你会想到700美元+苹果手机可以处理一点转换;）我想知道我的代码是否有问题我正在创建这个问题。这是我的第一个项目。谢谢你的时间。

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

自从我发布这个问题以来，我已经尝试过很多东西。我试过移动＆＃34;追加＆＃34;排到＆＃34;点击＆＃34;函数，图像立即加载，指向这个问题与append（）方法没有任何关系。我还尝试了一种不同的方法，即通过显示器立即加载图像＆＃34; none＆＃34;然后做一个.css（＆＃34;显示＆＃34;，＆＃34;阻止＆＃34;）而不是追加。我们仍然得到了黑色图像，它破坏了我在移动设备上的效果。如果您想亲自查看问题，请访问＆＃34; alicesoyer.com＆＃34;。该网站正在上线但正在建设中。您需要单击屏幕上的任意位置以启动动画。你会看到我想要的效果。在桌面上它工作正常。在移动设备上它没有。我在iPad Air和iPhone6上进行测试。感谢。

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

Answer 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();

Answer 3

我的建议，而不是将其附加到DOM中，在开头就包含它。但是，如果你愿意在init上增加额外负载，那就是这样。

＆＃13;

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

＆＃13;

#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%); }
}

＆＃13;

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

＆＃13;

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

3 个答案: