【问题标题】: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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-09-02
    • 2012-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-24
    • 1970-01-01
    相关资源
    最近更新 更多