图像加载时加载图标

Question

如何编写页面上的图像加载时出现的加载图标或图形。 一个例子是http://landerapp.com/ ？

我的目标是阻止用户在屏幕上看到这些图像，直到他们准备好制作动画（请参阅http://tsawebmaster1.hhstsa.com/index.html上的问题）。

Answer 1

让我们从一个可见的加载图像开始，该图像固定在屏幕的正中间。 然后，当页面完全加载时，我们将在<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" />

Answer 2

如果您正在使用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>

图像加载时加载图标

问题描述

2 个解决方案

解决方案1
0 2016-05-16 02:29:18

解决方案2
0 2016-05-16 04:35:09

图像加载时加载图标

问题描述

2 个解决方案

解决方案1 0 2016-05-16 02:29:18

解决方案2 0 2016-05-16 04:35:09

解决方案1
0 2016-05-16 02:29:18

解决方案2
0 2016-05-16 04:35:09