【问题标题】:How to put a pre-loader backgroud for images on ioinc 4如何在 ionic 4 上放置图像的预加载器背景
【发布时间】:2019-08-10 15:56:47
【问题描述】:

我的问题是如何在图像加载之前放置背景颜色(预加载器)?!

我正在使用ionic 4.1构建一个电子商务移动应用程序,问题是页面上的图片太多,所以当它加载时,应用程序看起来

我使用ion-img 标签进行延迟加载,这甚至让事情变得更糟,加载之前的图像显示破损标记 -_- 然后正常加载!

我已经搜索过这个并找到了一个名为 ionic-image-loader 的库,所以我试了一下,不幸的是它不适用于 ionic 4!

我需要的是这样的东西!如果你打开这篇文章,我需要加载图片时的相同效果!

https://onezero.medium.com/google-just-showed-us-the-future-of-gaming-37ccec59e2dd

【问题讨论】:

    标签: javascript angular ionic-framework lazy-loading ionic4


    【解决方案1】:

    [编辑]

    所以我做了一些研究并得出了这个结果:

    window.onload = function() {
      
      var placeholder = document.querySelector('.placeholder'),
          small = placeholder.querySelector('.img-small')
      
      // 1: load small image and show it
      var img = new Image();
      img.src = small.src;
      img.onload = function () {
        small.classList.add('loaded');
      };
      
      // 2: load large image
      var imgLarge = new Image();
      imgLarge.src = placeholder.dataset.large; 
      imgLarge.onload = function () {
        setTimeout(function(){ imgLarge.classList.add('loaded'); }, 2000);
      };
      placeholder.appendChild(imgLarge);
    }
    .placeholder {
      background-color: #f6f6f6;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden;
    }
    
    .placeholder img {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;
      transition: opacity 1s linear;
    }
    
    .placeholder img.loaded {
      opacity: 1;
    }
    
    .img-small {
      filter: blur(50px);
      /* this is needed so Safari keeps sharp edges */
      transform: scale(1);
    }
    <html>
        <body>
            <div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
                <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small">
                <div style="padding-bottom: 66.6%;"></div>
            </div>
        </body>
    </html>

    来源:https://jmperezperez.com/medium-image-progressive-loading-placeholder/

    它是如何工作的?

    很简单,您需要 2 张图片(一张非常小,一张普通的)。

    这是非常小的图像(易于加载)

    这是常规图片(加载时间较长)

    当加载较大的图像时,javascript 会在这两个图像之间启动转换。给你!

    【讨论】:

    • Ionic 现在有一个像这样的内置功能,称为 (ion-skeleton-text),具有相同的动画和所有内容,我实际上使用它 我的问题只是图像需要给它一个背景当它使用 ion-img 加载时,例如 medium.com
    • 如果你打开这篇文章你会明白我的意思看看图片是如何加载的?!onezero.medium.com/…
    猜你喜欢
    • 2019-07-24
    • 1970-01-01
    • 1970-01-01
    • 2018-02-04
    • 2011-11-03
    • 1970-01-01
    • 2013-11-28
    • 2019-11-06
    • 2019-07-11
    相关资源
    最近更新 更多