当前位置： 文江博客话题详情

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

发布于 2024-10-09 20:50:21 字数 129 浏览 4 评论 0原文

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

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

我该怎么做？

原文

I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once.

I want instead to first show a "loading" gif in the center of the page and then, when all the images are downloaded, show the entire webpage to the user at once..

How can I do this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

糖粟与秋泊 2024-10-16 20:50:21

您可以通过将加载程序图像放在 标记中的某个位置来显示加载程序图像，并在显示所有图像时使用下面的 js 代码隐藏它：

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

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

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

You can show a loader image by putting it somewhere im <img> tag and use below js code to hide it later on when all images are shown:

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

Where elementID is supposed to be the id of loader element/tag.

The load event fires when all images/frames/external resources are loaded, so by the time that event fires, all images are loaded and we therefore hide the loading message/image here.

回复 原文
多谢你的绝情让我学会死心 2024-10-16 20:50:21

编辑：我遵循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>

Edit: I defer to Keltex's answer. It's a much better solution. I'll leave mine here for posterity (unless I should delete the content and my answer entirely? I'm new here).

Another solution, which was used fairly frequently in the past, is to create a landing page that preloads all of your images. When the preloading is done, it redirects to the actual site. In order for this to work, you'd need to get the URLs to all of the images you want to load, and then do something like this:

# 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>
回复 原文
愚人国度 2024-10-16 20:50:21

您可以使用 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();
    });
});

You can do this with JQuery. Say your page looks like this:

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

You can have a JQuery function to show pagecontent when the entire page is loaded:

$(document).ready(function() {
    $(window).load(function() {
         $('#loader').hide();
         $('#pagecontent').show();
    });
});
回复 原文
朮生 2024-10-16 20:50:21

HTML

<div id="preloader">
    <div id="loading-animation"> </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;
}

HTML

<div id="preloader">
    <div id="loading-animation"> </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;
}
回复 原文
乖乖公主 2024-10-16 20:50:21

创建一个带有类名 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
    });

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

Create a div with class name preloader and put a loader inside that div.

style the class preloader just like below

  .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
    });

A simple page loader is ready....

回复 原文
~没有更多了~

关于作者

赠意

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文