HTML

Question

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

我希望首先在页面中央显示“加载”gif，然后在下载所有图像时立即向用户显示整个网页..

我该怎么做？

Answer 1

您可以通过将加载程序图像放在im <img>标记的某处来显示加载程序图像，并在以后使用js代码隐藏它以显示所有图像：

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

其中elementID应该是加载器元素/标记的id。

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

Answer 2

编辑：我推荐Keltex's answer.这是一个更好的解决方案。我会留下我的后代（除非我完全删除内容和我的答案？我是新来的。）

过去经常使用的另一种解决方案是创建一个预加载所有图像的登录页面。预加载完成后，它会重定向到实际站点。为了实现这一点，您需要获取要加载的所有图像的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>

Answer 3

您可以使用JQuery执行此操作。说你的页面是这样的：

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

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

$(document).ready(function() {
    $(window).load(function() {
         $('#loader').hide();
         $('#pagecontent').show();
    });
});

Answer 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;
}

Answer 5

创建一个带有类名称预加载器的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
    });

一个简单的页面加载器准备就绪....

如何在显示之前预加载网页？

5 个答案:

HTML

JAVASCRIPT

CSS