Question

目前正在建立一个显示＆＃34;假冒＆＃34;进入侧面时的预加载器 - 在这种情况下是一个动画徽标，GIF~3.5秒长，在淡出之前只显示一个循环。

预加载器本身运行正常，只有在重新加载页面时才会出现问题：GIF从一个随机位置开始，让我假设GIF正在后台重放。这通常不会成为一个问题，因为preloader-gifs意味着保持循环，但在这种情况下，徽标会自行构建，并且开始和结束帧完全不同，并且不适合循环。

我该如何解决这个问题？

以下是我的代码：

HTML：

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="PreLoader/preloader.css"/>
        <script type="text/javascript" src="PreLoader/preloader.js"></script>
    </head>
    <body>
        <div class="preloader">
            <span class="preloader-gif"></span>
        </div>
    </body>

CSS：

.preloader{
    position: fixed;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    background: #7BAABE;
    z-index: 99999;
}

.preloader .preloader-gif{
    display: block;
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -500px ;
    background-image: url("preloader.gif");  
    background-repeat: no-repeat;
}

JS：

$(document).ready(function () {

  // preloader
  $(window).load(function(){
    $(".preloader").delay(3500).fadeOut(500).stopp();

  })

})

谢谢！

Answer 1

我知道已经很久了，但是这里有一个简单的解决方案使用背景图片的解决方案-只需很小的更改即可用于img：

    <div class="loader"></div>
    <script>
        const loaderMaker = () => {
        const preFix = window.origin;
        const loaderGifUrl = 
        `url('${preFix}/ImagePath.gif?a=${Math.random()}')`;
        //console.log(loaderGifUrl); (to check the given url is right);
        document.querySelector('.loader').style.background = `${loaderGifUrl} no-repeat 
    50% 50%`;
        };
        loaderMaker();
    </script>

首次循环后重置并停止预加载器-GIF

1 个答案: