javascript - 渐进式加载代码片段不太了解

Question

我目前正致力于制作一个元素渐进式加载，以便让英雄横幅的加载更加流畅，我来自这个代码示例:

Codepen

我似乎无法理解的是如何将占位符图像切换为原始图像。

javascript 似乎根本没有引用原始图像？ 那么它是如何渲染的呢？

我目前在使用 javascript 时出现白屏，这是有道理的，因为模糊的图像变得更加不透明 =1 =>

$(function(){

  $('.progressive-image').each(function(){

    var image = new Image();
    var previewImage = $(this).find('.loadingImage');
    var newImage = $(this).find('.overlay');

    image.onload = function(){
      newImage.css('background-image', 'url(' + image.src + ')');
      newImage.css('opacity', '1');
      console.log('complete');
    };

    image.src = previewImage.data('image');

  });

});

那么这个代码笔是如何混合原始图像和模糊图像的呢？ newimage 找到的标签不包含图像？所以更困惑了？

Answer 1

这有点令人困惑，但代码实际上并没有删除旧图像。它将新图像插入到 <div class="overlay"></div> 中，它覆盖了 <div class="loadingImage"></div> 中的“正在加载”图像.

看看你的Elements检查器中的选项卡，您将能够看到这两个。

这是如何运作的？

更具体地说，该脚本从 data-image 中获取“全分辨率”图像 url loading-image 中的标签分区

<div 
  class="loadingImage"
  style="background: url('https://res.cloudinary.com/sourcetoad/image/upload/v1483582294/frog-2-sm_zjphps.jpg')"
  data-image="https://res.cloudinary.com/sourcetoad/image/upload/v1483582295/frog-2-lg_vahxhg.jpg">
</div>

它捕获了 data-image与:

image.src = previewImage.data('image');

然后它将它作为背景图像插入到 overlay 中股利:

newImage.css('background-image', 'url(' + image.src + ')');