6

我创建了一个包含多个图像的简单网页，但是当用户访问它时，浏览器一次加载一个图像，而不是一次加载所有图像。

我想先在页面中心显示一个“正在加载”的 gif，然后在下载所有图像后，立即向用户显示整个网页。

我怎样才能做到这一点？

4

5 回答 5

11

您可以通过将加载器图像放在某个 im<img>标记处来显示加载器图像，并使用下面的 js 代码稍后在显示所有图像时将其隐藏：

window.onload = function(){
  var el = document.getElementById('elementID');
  el.style.display = 'none';
};

哪里elementID应该是加载器元素/标签的 id。

当加载所有图像/帧/外部资源时触发该事件，因此在该load事件触发时，所有图像都已加载，因此我们在此处隐藏加载消息/图像。

于 2010-12-31T17:33:40.710 回答
7

编辑：我听从Keltex 的回答。这是一个更好的解决方案。我会把我的留在这里留给后代（除非我应该完全删除内容和我的答案？我是新来的）。

另一个在过去经常使用的解决方案是创建一个预加载所有图像的登录页面。预加载完成后，它会重定向到实际站点。为了使其工作，您需要获取要加载的所有图像的 URL，然后执行以下操作：

# on index.html, our preloader
<script type='text/javascript'>
    // add all of your image paths to this array
    var images = [
        '/images/image1.png',
        '/images/image2.png',
        '/images/image3.png'
    ];

    for(var i in images) {
        var img = images[i];
        var e = document.createElement('img');
        // this will trigger your browser loading the image (and caching it)
        e.src = img;
    }

    // once we get here, we are pretty much done, so redirect to the actual page
    window.location = '/home.html';
</script>
<body>
    <h1>Loading....</h1>
    <img src="loading.gif"/>
</body>
于 2010-12-31T17:42:12.857 回答
6

你可以用 JQuery 做到这一点。假设您的页面如下所示：

<body>
   <div id='loader'>Loader graphic here</div>
   <div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>

您可以使用 JQuery 函数在加载整个页面时显示页面内容：

$(document).ready(function() {
    $(window).load(function() {
         $('#loader').hide();
         $('#pagecontent').show();
    });
});
于 2010-12-31T17:41:34.597 回答
4

HTML

<div id="preloader">
    <div id="loading-animation">&nbsp;</div>
</div>

JAVASCRIPT

<script type="text/javascript">
    /* ======== Preloader ======== */
    $(window).load(function() {
        var preloaderDelay = 350,
                preloaderFadeOutTime = 800;

        function hidePreloader() {
            var loadingAnimation = $('#loading-animation'),
                    preloader = $('#preloader');
            loadingAnimation.fadeOut();
            preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
        }

        hidePreloader();
    });
</script>

CSS

#preloader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    position: fixed;
    background-color: #fff;
}

#loading-animation {
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      position: absolute;
      margin: -100px 0 0 -100px;
      background: url('loading-animation.gif') center center no-repeat;
}
于 2013-11-04T03:32:54.510 回答
3

创建一个类名为 preloader 的 div 并在该 div 中放置一个加载器。

像下面一样设置类预加载器的样式

  .preloader {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: white; 
        /* background-color is would hide the data before loading
        text-align: center;
   }

html

   <div class="preloader">
    Any loader image
   </div>

jQuery

     $(window).load(function(){
        $('.preloader').fadeOut(); // set duration in brackets
    });

一个简单的页面加载器已经准备好了......

于 2015-04-17T10:33:27.613 回答