#html #css
#HTML #css
Вопрос:
У меня есть изображение, которое может загружаться медленно для некоторых пользователей моего сайта, поэтому я хотел бы иметь разумный запасной заполнитель во время его загрузки. Я нашел библиотеку gradify, которая может создавать градиент CSV, соответствующий изображению.
Перед началом загрузки изображения отображается градиент фона. Однако, как только изображение начинает загружаться, оно заменяется белым фоном, а затем загружается сверху вниз.
(Вы можете увидеть это, активировав регулирование в инструментах разработчика браузера при загрузке изображения.)
Возможно ли без JavaScript не начинать показывать изображение до тех пор, пока оно не будет полностью загружено?
Я думаю, что я мог бы частично облегчить это, перейдя на чересстрочное / прогрессивное изображение, но меня все еще интересует ответ на вопрос 🙂
body {
/* just centering stuff, not really part of the question */
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
/* bg so you can see the effect */
background: radial-gradient(circle, #222 0%, #aaa 100%);
}
img {
width: 10em;
height: 10em;
border: 5px solid purple;
border-radius: 50%;
box-sizing: border-box;
/* generated by gradify */
background-color: rgb(72,148,223);
background-image: linear-gradient(270deg, rgba(72,148,223,1) 0%, rgba(72,148,223,0) 100%),linear-gradient(90deg, rgba(49,98,174,1) 0%, rgba(49,98,174,0) 100%),linear-gradient(180deg, rgba(114,129,143,1) 0%, rgba(114,129,143,0) 100%),linear-gradient(0deg, rgba(43,48,71,1) 0%, rgba(43,48,71,0) 100%);
} <html>
<body>
<img src="https://jpeg.org/images/about.jpg">
</body>
</html> Комментарии:
1. Вы не сможете сделать это без JavaScript. Это вариант?
2. Это вариант, но я бы предпочел этого не делать (хотя и не по какой-либо действительно веской причине). Я думаю, что переход на прогрессивный маршрут изображения может быть правильным выбором.