Question

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

<!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>

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

在缩略图向上滑动之前使这些图像可见的一些解决方案？

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

0 个答案: