发表新帖
发表新帖

Placeholder background/image while waiting for full image to load?

前端 未结
关注
11 1551
栀梦
栀梦 2020-12-13 03:36

I have a few images on my page. I\'m finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Ini

相关标签:
11条回答
  • 长发绾君心
    2020-12-13 04:15

    The only thing I can think of, to minimize the jump effect on your text, is to set min-height to where the image will appear, I would say - set it to the "shorter" image you know of. This way the jump will be less evident and you won't need to use lazyLoad or so... However it doesn't completely fix your problem.

    0 讨论(0)
  • 有刺的猬
    2020-12-13 04:16

    I hope this works. Feel Free to copy this:

    <script>
    window.addEventListener("load", function () {
        document.getElementById('image').style.backgroundColor = 'transparent';
    });
</script>

<body>
       <image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>

    I got this from here: Preloader keeps on loading and doesnt disappear when the content is loaded.

    0 讨论(0)
  • 情深已故
    2020-12-13 04:20

    It's very simple.. This scenario allows to load profile photo that default placeholder image. You could load multi css background-image into an element. When avatar photo fails, the placeholder image appears default of div.

    If you're using a div element that loads via css background-image, you could use this style:

        #avatarImage {
        background-image: url("place-holder-image.png"), url("avatar-image.png");
    }

        <div id="avatarImage"></div>

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-13 04:20 
        #avatarImage {
        background-image: url("place-holder-image.png"), url("avatar-image.png");
    }

        <div id="avatarImage"></div>
    0 讨论(0)
  • 野性不改
    2020-12-13 04:24

    Apart from all solutions already mentioned, last solution would be to hide document unlit everything is loaded.

    window.addEventListener('load', (e) => {
  document.body.classList.add('loaded');
});
    body {
  opacity: 0;
}
body.loaded {
  opacity: 1;
}
    <div id="sidebar">
  <img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>

    or show some animation while everything is loading:

    window.addEventListener('load', (e) => {
  document.body.classList.add('loaded');
});
    .loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 70px;
  height: 70px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  position: absolute;
  left: calc(50% - 35px);
  top: calc(50% - 35px);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body :not(.loader) {
  opacity: 0;
}

body .loader {
  display: block;
}

body.loaded :not(.loader) {
  opacity: 1;
}

body.loaded .loader {
  display: none;
}
    <div class="loader"></div>
<div id="sidebar">
  <img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
  <img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-13 04:26

    There is a really simple thing to check before you start looking into lazy-loading and other JS. Make sure the JPG images you are loading are saved with the 'progressive' option enabled! This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest res data before rendering.

    0 讨论(0)
 看不清?
提交回复
热议问题