Javascript 元素上延迟的背景图像渲染最初不可见_Javascript_Jquery_Html_Css

Javascript 元素上延迟的背景图像渲染最初不可见

javascript jquery html css

Javascript 元素上延迟的背景图像渲染最初不可见,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我制作了一个滑块，幻灯片缩略图隐藏在页面底部。工作小提琴：文件 .缩略图{ 位置：固定；底部：0；左：0；右：0；高度：200px；显示：块；底部：-200px； } .拇指，拇指{ 位置：相对位置；浮动：左；高度：200px；背景尺寸：自动100%；背景重复：无重复；背景位置：0；宽度：20%；背景位置：中心；光标：指针； } 图1{ 背景图片：url（“img/slide_1.jpg”）； } .拇指2{ 背景图片：url（“img/slide_2.jpg”）

我制作了一个滑块，幻灯片缩略图隐藏在页面底部。工作小提琴：


文件
.缩略图{
位置：固定；
底部：0；
左：0；
右：0；
高度：200px；
显示：块；
底部：-200px；
}
.拇指，拇指{
位置：相对位置；
浮动：左；
高度：200px；
背景尺寸：自动100%；
背景重复：无重复；
背景位置：0；
宽度：20%；
背景位置：中心；
光标：指针；
}
图1{
背景图片：url（“img/slide_1.jpg”）；
}
.拇指2{
背景图片：url（“img/slide_2.jpg”）；
}
图3{
背景图片：url（“img/slide_3.jpg”）；
}
.拇指4{
背景图片：url（“img/slide_4.jpg”）；
}
图5{
背景图片：url（“img/slide_5.jpg”）；
}
.ovl{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景图片：url（“img/mask.png”）；
}
幻灯片1文本
幻灯片2文本
幻灯片3文本
幻灯片4文本
幻灯片5文本
var thumbnails=$（'.thumbnails'）；
var open=false；
$（窗口）.on（'mousemove'，函数（e）{
log（thumbnails.is（':animated'））；
if（thumbnails.is（'：animated'）返回；
var$this=$（this）；
//当点不可见时，仅运行缩略图
如果（$this.height（）-e.pageY<50）&&！打开）{
//显示缩略图
css（'bottom'，'0'）.hide（）；
缩略图。向下滑动（函数（）{
开放=真实；
});
}否则如果（$this.height（）-e.pageY>200））{
//隐藏缩略图
缩略图.slideUp（函数（）{
css（'bottom'，'-200px'）.show（）；
开=假；
});
}
});

在Chrome和IE中，一切正常，但在FF（我使用的是版本51.0.1）中，图像似乎延迟了渲染。当我检查网络流量时，所有图像都会在html之后下载。当我将光标移动到页面底部（显示缩略图）时，首先看到的是.ovl掩码，大约0.5-1s后会出现图片

在缩略图向上滑动之前，如何使这些图像可见

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
  <style>
    .thumbnails {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      display: block;
      bottom: -200px;
    }

    .thumbnails .thumb {
      position: relative;
      float: left;
      height: 200px;
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: 0 0;
      width: 20%;
      background-position: center;
      cursor: pointer;
    }

    .thumb_1 {
      background-image: url("img/slide_1.jpg");
    }

    .thumb_2 {
      background-image: url("img/slide_2.jpg");
    }

    .thumb_3 {
      background-image: url("img/slide_3.jpg");
    }

    .thumb_4 {
      background-image: url("img/slide_4.jpg");
    }

    .thumb_5 {
      background-image: url("img/slide_5.jpg");
    }
    .ovl {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-image: url("img/mask.png");
    }
  </style>
</head>
<body>
<div class="thumbnails">
    <div class="thumb thumb_1" data-target="#slide_1">
        <div class="ovl"></div>
        <div class="thumb_text">Slide 1 text</div>
    </div>
    <div class="thumb thumb_2" data-target="#slide_2">
        <div class="ovl"></div>
        <div class="thumb_text">Slide 2 text</div>
    </div>
    <div class="thumb thumb_3" data-target="#slide_3">
        <div class="ovl"></div>
        <div class="thumb_text">Slide 3 text</div>
    </div>
    <div class="thumb thumb_4 active" data-target="#slide_4">
        <div class="ovl"></div>
        <div class="thumb_text">Slide 4 text</div>
    </div>
    <div class="thumb thumb_5" data-target="#slide_5">
        <div class="ovl"></div>
        <div class="thumb_text">Slide 5 text</div>
    </div>
</div>

<script>
var thumbnails = $('.thumbnails');
var open = false;
  $(window).on('mousemove', function(e) {
    console.log(thumbnails.is(':animated'));
        if (thumbnails.is(':animated')) return;

        var $this = $(this);

        //run thumbnails only, when dots are invisible
          if (($this.height() - e.pageY < 50) && !open) {
            //show thumbnails
            thumbnails.css('bottom', '0').hide();
            thumbnails.slideDown(function() {
              open = true;
            });
          } else if(($this.height() - e.pageY > 200)) {
            //hide thumbnails
            thumbnails.slideUp(function() {
              thumbnails.css('bottom', '-200px').show();
              open = false;
            });
          }
      });
</script>
</body>
</html>