图片加载时加载图标

如何加载页面上图像时加载图标或图形？一个例子是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我建议你使用imagesLoaded这是为了实现你想要的。

我会去像这样的东西：

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

图片加载时加载图标

回答

相关问题