jquery - jQuery 预加载器不会停止并且不会转换到主页

问题描述

我不明白问题出在哪里，控制台也没有错误。该页面只是停留在加载屏幕上，不会重定向到实际站点

预加载器的 HTML：

    <!--preloader-->
<div class="preloader js-preloader flex-center" id="preload">
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>
<!--end preloader-->

预加载器的 CSS：

    .flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #60D7A9;
  z-index: 99999;
}

.dots .dot {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0 10px 0 10px;
  border-radius: 50%;
  background: #FFF;
  -webkit-animation: dot-dot-dot 1.4s linear infinite;
  animation: dot-dot-dot 1.4s linear infinite;
}

.dots .dot:nth-child(2) {
  animation-delay: .2s;
}

.dots .dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes dot-dot-dot {
  0%, 60%, 100% {
    -webkit-transform: initial;
      -ms-transform: initial;
        transform: initial;
  }
  30% {
    -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
        transform: translateY(-25px);
  }
}

jQuery 插件：https ://www.jqueryscript.net/loading/Loader-Preloader-Plugin-jQuery-Preloadinator.html

插件代码：

;(function($) {
    $.fn.preloadinator = function(options) {
        'use strict';

        var settings = $.extend({
            scroll: false,
            minTime: 0,
            animation: 'fadeOut',
            animationDuration: 400,
            afterDisableScroll: function() {},
            afterEnableScroll: function() {},
            afterRemovePreloader: function() {}
        }, options),
        preloader = this,
        start = new Date().getTime();

        $.fn.preloadinator.disableScroll = function() {
            $('body').css('overflow', 'hidden');

            if(typeof settings.afterDisableScroll == 'function') {
                settings.afterDisableScroll.call(this);
            }
        }

        $.fn.preloadinator.enableScroll = function() {
            $('body').css('overflow', 'auto');

            if(typeof settings.afterEnableScroll == 'function') {
                settings.afterEnableScroll.call(this);
            }
        }

        $.fn.preloadinator.removePreloader = function() {
            $(preloader)[settings.animation](settings.animationDuration, function() {
                if(settings.scroll === false) { 
                    $.fn.preloadinator.enableScroll(); 
                }
                if(typeof settings.afterRemovePreloader == 'function') {
                    settings.afterRemovePreloader.call(this);   
                }
            });
        }

        $.fn.preloadinator.minTimeElapsed = function() {
            var now = new Date().getTime(),
            elapsed = now - start;

            if(elapsed >= settings.minTime) {
                return true;
            }
            else {
                return false;
            }
        }

        if(settings.scroll === false) { $.fn.preloadinator.disableScroll(); }

        $(window).on('load', function() {
            if($.fn.preloadinator.minTimeElapsed()) {
                $.fn.preloadinator.removePreloader();
            }
            else {
                var now = new Date().getTime(),
                elapsed = now - start;

                setTimeout($.fn.preloadinator.removePreloader, settings.minTime - elapsed);
            }
        });

        return this;
    }
}(jQuery));

$('.js-preloader').preloadinator();

$('.js-preloader').preloadinator({
      scroll:false,
      minTime: 2000,  
      animation: 'fadeOut',
      animationDuration: 400,
      afterEnableScroll: function() {},
      afterRemovePreloader: function() {},
    });

我一直在寻找解决方案几个小时，似乎找不到任何东西。谢谢

标签： jquery

据我了解，此处使用的插件仅用于显示加载图标。

如果您转到上面共享的链接，您可以看到回调函数，基本上您必须在那里添加代码以重定向到另一个页面。

像这样的东西

$('.js-preloader').preloadinator({
    minTime: 2000,
    scroll: false,
    animation: 'fadeOut',
    animationDuration: 400,
    afterDisableScroll: function() { 
      alert('afterDisableScroll'); 
      window.location.href= 'https://www.google.com'
    },
    afterEnableScroll: function() {alert('afterEnableScroll')},
    afterRemovePreloader: function() {alert('afterRemovePreloader')}
});

afterDisableScroll, afterEnableScroll, afterRemovePreloader,是您可以使用的回调函数。

我已添加，alert并将window.location.href页面重定向到google.com，因此您可以根据需要使用 3 个可用功能中的任何一个。

jquery - jQuery 预加载器不会停止并且不会转换到主页

问题描述

解决方案

推荐阅读