画像読み込み中にアイコンを読み込む

ページ上の画像が読み込まれているときに表示される読み込みアイコンまたは画像をどのようにプログラムできますか？例はhttp://landerapp.com/でしょうか？画像読み込み中にアイコンを読み込む

私の目標は、アニメーション化する準備が整うまで（http://tsawebmaster1.hhstsa.com/index.htmlの問題を参照）、ユーザーがこの画像を画面に表示しないようにすることです。

出典

2016-05-16 Etan Ginsberg

画面の真ん中に固定されている可視の読み込み画像から始めましょう。ページが完全にロードされたときに続いて、我々は<body>に"page_loaded"クラスを追加します：

は

[1]のローディング画像のフェードアウトを開始します

は

[2]のフェードインし、翻訳を開始しますあなたはを使用するには、画面

window.onload = function() { 
 
    document.body.classList.add("page_loaded"); 
 
}

.loader {  
 
    opacity: 1; 
 
    transition: 2s opacity; 
 
    height: 300px; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.right, 
 
.left { 
 
    height: 100px; 
 
    position: absolute; 
 
    transition: 1s 2s; 
 
    opacity: 0; 
 
} 
 

 
.left { 
 
    left: 0; 
 
    transform: translateX(-50em); 
 
} 
 

 
.right { 
 
    right: 0; 
 
    transform: translateX(50em); 
 
} 
 

 
.page_loaded .loader { 
 
    opacity: 0; 
 
} 
 

 
.page_loaded .right, 
 
.page_loaded .left { 
 
    opacity: 1; 
 
    transform: translateX(0); 
 
}

<img class="loader" src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt="" /> 
 

 
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" class="right" /> 
 

 
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTS704tVMgbKCry10AhT09VE8wBY5S9v-PWxTBOa7o52JU0TsjH" alt="" class="left" />

出典

2016-05-16 02:29:18

にオフスクリーンの画像あなたがVanillaやjQueryを使用している場合は、私がお勧めしたいですはあなたが望むものを正確に達成するためのものです。

私はこのようなものでいいと思う：

$(function(){ 
 
    $('.img-container img').imagesLoaded().done(function(){ 
 
    console.log('images loaded'); 
 
    $('.img-container .loader').remove(); 
 
    $('.img-container img.hide').removeClass('hide'); 
 
    }).fail(function(){ 
 
    console.log('FAILED TO LOAD IMAGES'); 
 
    }); 
 
});

.img-responsive { 
 
    max-width : 100%; 
 
    } 
 
    
 
    .hide { 
 
    display : none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script> 
 
<div class="img-container"> 
 
    <div class="loader"> 
 
    Loading image.... 
 
    </div> 
 
    <img src="http://mascotafiel.com/wp-content/uploads/2015/10/perros-Husky-Siberiano_opt-compressor-1.jpg" alt="PrettyCoolImage" class="img-responsive hide"> 
 
</div>

出典

2016-05-16 04:35:09

画像読み込み中にアイコンを読み込む

答えて

関連する問題