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

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

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

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

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

我该怎么做？

原文

分享到QQ

分享到微博

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

发布评论

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

糖粟与秋泊 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.

回复收藏 0 原文

多谢你的绝情让我学会死心 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>

回复收藏 0 原文

愚人国度 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();
    });
});

回复收藏 0 原文

朮生 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;
}

回复收藏 0 原文

乖乖公主 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 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

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

发布评论

评论（5）

HTML

JavaScript

CSS

HTML

JAVASCRIPT

CSS

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

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

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

发布评论

评论（5）

HTML

JavaScript

CSS

HTML

JAVASCRIPT

CSS

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

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