.append（）非常にゆっくりと画像を画像に添付します。

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

それはかなり簡単だと、それはデスクトップ上で動作しています。モバイルでは、＃ボタンをクリックするとすぐに2番目の画像が読み込まれないため、1秒間黒い画像が表示され、私が行っている効果が完全に失われます。これはiPhoneとiPadの両方で発生します。私はまだアンドロイドでテストする機会がありませんでしたが、あなたは$ 700 + Appleの携帯電話が少しの移行を処理できると思っていたでしょう）私はこの問題を作成している自分のコードで間違っていることがあるかどうか疑問です。これが私の最初のプロジェクトです。御時間ありがとうございます。

---------------------------------------------- ---------------------編集---------------------------- --------------------------------

私はこの質問を投稿して以来、私はかなりのことを試みました。私は、 "クリック"関数の外側に "append"行を移動しようとしました。この問題はappend（）メソッドとは関係がありません。また、別のアプローチを試みました。画像をすぐに表示して「なし」にし、その後に追加する代わりに.css（「表示」、「ブロック」）を実行します。それでも私は携帯電話で起こっている効果を台無しにする黒い画像を取得します。 問題を自分で確認したい場合は、「alicesoyer.com」にアクセスしてください。サイトはライブですが、建設中です。アニメーションを起動するには、画面上の任意の場所をクリックする必要があります。あなたは私が行っている効果を見るでしょう。デスクトップ上では正常に動作します。モバイルではそうではありません。私はiPadの空気とiPhone6でテストしています。ありがとう。

Answer 1

ソリューションは

を追加することです

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

または少なくともいくつかの子要素で、ブラウザがハードウェアアクセラレーションをよりよく使用するようトリガーします。 thisページ

で 詳細情報---更新：むしろ、私の提案を

.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

：（。唯一のアニメーションにすなわち）このようにそれを置くことは、十分ですし、おそらく新しいiPadの問題を解決するウィルそれを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>