Question

我有一个全屏图像和一个按钮，当点击它时，触发上面第二个图像的外观（实际上是其他图像;为了这个问题，我在这里简化为一个图像）。

我想要实现的内容：我希望当用户点击按钮时，图片正在加载（=图像完全加载并且可用，用户），用户应该看到一个红色的全屏图像和一个加载GIF，如下所示。也就是说， AS SOON AS 他点击了按钮，他应该会看到一个红色的全屏图像和一个加载的gif，如下所示（请注意，我不在乎绿色按钮是否可见或不是在加载期间）：

我正在使用this method仅在图像完全加载时加载图像（以避免错误连接的常见情况，图像逐渐从顶部开始然后延伸到底部）。

我尝试了很多东西，但没有任何作用：我没有设法在触摸绿色按钮后加载这个红色屏幕和加载gif（参见jsfiddle Demo）。

为了确保它正常工作，我使用chrome Dev工具并在网络中扼杀连接速度＆＃39; Tab，这样我就有时间看看红色背景和加载gif是否及时出现。

这是我的代码：

＆＃13;

lazy_load_background_assets();

function lazy_load_background_assets() {
  $("#main-image-zone").css({
    'backgroundImage': 'url(' + $("#background-img").attr('data-src') + ')',
    //smooth transition for webkit browsers
    'transition': 'background-image 0.2s ease',
    '-webkit-transition': 'background-image 0.2s ease'
  });

  $('#st15').on('click', function(e) {
    var $nextImage = $('#contentAfterInitialImage').find('#backgroundAsset-15');
    console.log($nextImage);

    // prevents the loaded image if it is already loaded
    var src = $nextImage.data('lazyclick-src');
    console.log(src);
    if (typeof src !== "undefined" && src != "") {
      $nextImage.attr('src', src);
      $nextImage.attr('data-lazyclick-src', '');
    }
  });

}

＆＃13;

.page-bckdCover {
  min-height: 300px;
  height: 100%;
  height: 100vh;
  background-attachment: scroll;
  overflow: hidden;
}

.page-bckdImgCover {
  display: none;
}

section {
  display: block;
}

img {
  vertical-align: middle;
}

//Progressive Loading
//inspired by https://www.perpetual-beta.org/weblog/silky-smooth-image-loading.html
.image-loader {
  background: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  img {
    position: absolute;
  }
}

.image-loading {
  opacity: 0;
}

.image-loaded {
  opacity: 1;
  transition: opacity 0.2s ease;
  transform: translate3d(0, 0, 0);
}

// fix users seeing alts on image load
img.page-bckdImgCover {
  color: transparent;
}

img.page-bckdCover {
  color: transparent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Progressive Loading
    inspired by https://www.perpetual-beta.org/weblog/silky-smooth-image-loading.html -->
<script type="text/javascript">
  //<![CDATA[
  // swap 'image-loading' class for 'image-loaded'
  function imageLoaded(img) {
    img.classList.add('image-loaded');
    img.classList.remove('image-loading');
  };
  //]]>
</script>


<section id="main-image-zone" class="page-bckdCover" style=" background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAKAB4DAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQYE/8QAJBAAAgEEAQMFAQAAAAAAAAAAAQIDAAQREgUTITEyQUJRcZL/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAgP/xAAdEQACAgIDAQAAAAAAAAAAAAAAAQIDESEEInEx/9oADAMBAAIRAxEAPwCOtrYGJmdY36iEIerqUOR3I9/yqRJssYAk2jakg47HIpUFoNYygsZY7PmYmcqge2dYiQMb/Xfxmj8pPRvxWt5Bb6BYbyUB9hIRJqRgrnPmpqei7liQInmqiRIWsPUKVENIT5FQZeJJAyZiD/SUW5934IpXReg7Mz8ldFyWJkfJJz8qx+JG7WWz/9k=');
              background-repeat: no-repeat;
              background-size:cover;
              background-position:50% 50%;">
  <img data-src="http://prestige-paradise.com/wp-content/uploads/2013/01/photo-hotel.jpg" class="page-bckdImgCover" id="background-img">


  <div id="contentAfterInitialImage" class="image-loader">
    <img data-lazyclick-src="https://www.gentlegiant.com/wp-content/uploads/2015/06/New-York.jpg" class="page-bckdCover" style="width:100%; background: url('https://m.popkey.co/163fce/Llgbv_s-200x150.gif') center no-repeat; 
            background-color: red;" data-id="trucgenial15" id="backgroundAsset-15" alt="new york" onload="imageLoaded(this)">
  </div>


</section>


<div id="buttons" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;">
  <!-- Throbbers' Modal - Gather here the various types of throbbers -->

  <div style="width:200px; height: 30px;background-color: green; top: 80%;left: 20%;position: absolute;" id="st15">
    <span>
            <a title="yoyoy" href="www.yahoo.com"></a>
          </span>
  </div>

</div>

<!--Progressive Loading
    inspired by https://www.perpetual-beta.org/weblog/silky-smooth-image-loading.html -->
<script type="text/javascript">
  //<![CDATA[
  // get all 'image-loader' containers
  function imageLoader() {
    var containers = document.getElementsByClassName('image-loader');
    var containerList = Array.prototype.slice.call(containers);
    containerList.forEach(getImage);
  }
  // get all images from within 'image-loader' containers
  function getImage(element) {
    var images = element.getElementsByTagName('img');
    var imageList = Array.prototype.slice.call(images);
    imageList.forEach(addImageLoadingClass);
  }
  // add 'image-loading' class
  function addImageLoadingClass(element) {
    element.classList.add('image-loading');
  }
  // launch the image loader
  (function() {
    imageLoader();
  })();
  //]]>
</script>

＆＃13;

我在html中试过没有成功：

<div  id="contentAfterInitialImage"
            class="image-loader"
            style="background: url('https://m.popkey.co/163fce/Llgbv_s-200x150.gif') center no-repeat; 
        background-color: red;">

但结果是你看到红色背景和页面加载的gif加载，不仅仅是在用户点击按钮后......

我创建了一个jsFiddle，以便更容易看到问题并迭代解决方案。

JsFiddle演示：https://jsfiddle.net/5c90soLs/
Jsfiddle全屏演示：https://jsfiddle.net/5c90soLs/embedded/result/https://jsfiddle.net/q4nk0gwj/embedded/result/ =＆gt;非常有用的分析问题并模拟Chrome / firefox / ..开发工具的慢速连接
JsFiddle Demo我尝试添加红色背景和加载gif但没有成功：https://jsfiddle.net/4nsnctsy/

不会出现预加载gif直到图像完全加载

0 个答案: