发表新帖
发表新帖

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

前端 未结
关注
11 1552
栀梦
栀梦 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:27

    Here's one naive way of doing it,

    img { box-shadow: 0 0 10px 0 rgba(#000, 0.1); }

    You can manipulate the values, but what it does is it creates a very light border around the image that doesn't push the contents. Images can load at whatever time they want, and you get a good user experience.

    Hope that it helps

    0 讨论(0)
  • 情歌与酒
    2020-12-13 04:30

    Instead of referencing the image directly, stick it within a DIV, like the following:

    <div class="placeholder">
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>

    Then in your CSS:

    .placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}
    0 讨论(0)
  • 名媛妹妹
    2020-12-13 04:32

    Keep in mind - the answers above that recommend using div background approach will change the semantic of your image by turning it from img into a div background. This will result in things like no indexing of these images by search crawler, delay in loading of these images by browser (unless you explicitly preload them), etc.

    A solution to this issue (while not using div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect-ratio of the image that you need to know in advance. Below code will work for image with aspect ratio of 2:1 (height is 50% of width)

    <div style="width:100%;height:0; padding-top:50%;position:relative;">
  <img  src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>

    Of course - the major disadvantage of this approach is that you need to know the aspect ratio of image in advance.

    0 讨论(0)
  • 深忆病人
    2020-12-13 04:32

    I have got a way. But you will need to use javascript for it.

    The HTML:

    img = document.getElementById("img")
text = document.getElementById("text")
document.addEventListener("DOMContentLoaded", () => {
    img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEWIiIhYZW6zAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC";
    text.innerHTML = "Loaded but image is not";
  });
window.onload = function() { 
img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png";
text.innerHTML = "Image is now loaded";
  };
    #img {
    width: 400px;
    height: 300px;
}
    <hr>

<img id="img" src="https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png">

<p>Here is the Image</p>
<p id="text">Not Loaded</p>

    0 讨论(0)
  • 失恋的感觉
    2020-12-13 04:34

    You can find the width and height of the images in the devtools console, for example in chrome you can click the cursor icon in the devtools console and when you hover on the page it will highlight all the properties of the elements in the page. This will help you find the width and height of the images because if you hover on top of your images it will give you the dimensions of the image and other more properties. You can also make an individual div for each image and make the div relative to the images width and height. You can do it like this:

    the main div will contain the images and also the background-div which is below the image.

    HTML:

    <html>
  <head>
     <meta charset="utf-8">
  </head>
  <body>
      <div class=".mainDiv">
        <div class="below"></div>
        <img src="https://imgix.bustle.com/uploads/image/2020/2/13/da1a1ca4-95ec-40ea-83c1-4f07fac8b9b7-eqb9xdwx0auhotc.jpg" width="500"/>
       </div>
  </body>
</html>

    CSS:

    .mainDiv {
  position: relative;
}

.below {
  position: absolute;
  background: #96a0aa;
  width: 500px;
  height: 281px;
}

img {
  position: absolute;
}

    The result will be that .below will be below the image and so when the image has trouble loading the user will instead see the grey .below div. You cannot see the .below div because it is hidden below the image. The only time you will see this is when the loading of the image is delayed.And this will solve all you problems.

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