页面预加载效果 - 加载并执行一次答案

【问题标题】：Page Preloading Effect - Load and execute once页面预加载效果 - 加载并执行一次
【发布时间】：2016-06-21 10:51:59
【问题描述】：

我正在使用Page Preloading Effect 以便可以加载我的主页。我需要锻炼如何确保它只在登陆网站时执行一次。每次访问主页时，它都会执行预加载效果。大概我可以使用 cookie，但我有点不确定从哪里开始！谢谢:)

【问题讨论】：

,您是否正在寻找一个预加载器，一个直到页面完全加载的动画？
是的，因为当用户访问该站点时，我需要显示一个大图像。我已经尽可能地优化并减小了图像的大小，但它仍然很大，所以我想在加载时重新加载动画以增强可用性。
试试我的解决方案，并随时询问您是否卡在某个地方

标签： cookies loading session-cookies preloader

【解决方案1】：

你可以使用 jQuery 来完成这个任务。在您的 HTML 页面中，在 body 标记内添加以下代码。

        <div class="loader">
         <h5 class="loaderH">Preparing. ...</h5>
       </div>

下面是上面 HTML 标签的 CSS

        .loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('../../images/loaders/preloader.gif') 50% 50% no-repeat rgb(249,249,249);
        }

        .loaderH{
            position: fixed;
            left: 45vw;
            top: 55vh;
        }

最后用户 jquery 在页面准备好之前加载。

        $(window).load(function() {
            $(".loader").fadeOut("slow");
            console.log('loaded');
        })

不要忘记更改背景 URL src 背景：url('../../images/loaders/preloader.gif') 50% 50% no-repeat rgb(249,249,249);

对于预加载器，您可以使用以下内容。

http://www.ajaxload.info/images/exemples/26.gif http://www.mandalayonlinestore.com/assets/img/loader.gif

或者只是谷歌预加载器 gif

【讨论】：