Как скрыть div после полной загрузки изображения? - PullRequest
Новая
       55

Как скрыть div после полной загрузки изображения?

0 голосов
/ 16 июня 2020

Я добавляю счетчик загрузки к своим изображениям на странице. Для этого я установил счетчик загрузки в качестве фона блока div, который окружает изображения, и после загрузки изображений фоновый счетчик покрывается изображениями.

Проблема в том, что некоторые из моих изображений имеют прозрачные центры поэтому в результате часть счетчика проходит через изображение.

Есть ли способ изменить фон div на прозрачный (или что-то еще, что удалит / скроет счетчик) после полной загрузки изображения ?

Если бы существовал способ запуска javascript после полной загрузки изображения, который работал бы, установив javascript, чтобы сказать что-то вроде document.getElementById('loading').style.background = "transparent";, я просто не знаю, возможно ли это, поскольку мой javascript знания очень минимальные.

Спасибо

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Вы можете прослушивать событие DOMContentLoaded окна. Это сработает, как только текст DOM станет доступен, но до загрузки других внешних ресурсов, таких как скрипты, изображения и таблицы стилей. ПРИМЕЧАНИЕ. Я решил не использовать более обычное событие «load» окна, потому что оно не срабатывает, пока изображения не загрузятся (или не завершатся ошибкой), что, вероятно, уже слишком поздно. Этот код позволяет вам определить, загружено ли изображение или не удалось, как это происходит . Возможно, вы хотите удалить битые изображения из DOM. Вы можете предпочесть событие 'load', зная, что браузер делает все возможное, и у вас есть либо изображения, либо большой палец сломанного изображения. количество изображений, прикрепите к каждому из них обработчик, который будет вызываться при их загрузке или сбое. Мы можем уменьшить значение счетчика внутри этого обработчика, и как только счетчик достигнет нуля, предпринять некоторые заранее определенные действия. эффект ниже: 

"use strict";
window.addEventListener('DOMContentLoaded', DOMContentLoaded, false);

function DOMContentLoaded(evt)
{
	let allImages = Array.from( document.querySelectorAll('img') );
	let numRemaining = allImages.length;
	allImages.forEach(  img => img.onload = img.onerror = onImgDone );

	function onImgDone(evt)
	{
		numRemaining--;
		if (numRemaining == 0)
		{
			var tmpMsg = document.querySelector('h1');
			tmpMsg.remove();
		}
	}
}
.box {
  --x: 10px;
  --y: 30px;
  --o:10px;

  clip-path:polygon(
       0 calc(var(--x) + var(--y)),var(--y) var(--y),
       calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
  -webkit-mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
          mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1);
  outline-offset: calc(-1*(var(--y) + var(--o)));
}
<h1>L O A D I N G</h1>
	<img src="https://picsum.photos/id/1015/728/600"  class="box">
0 голосов
/ 16 июня 2020

Вы пытаетесь имитировать своего рода «ленивую загрузку», но в JS нет события для прослушивания.

Для событий такого типа вам нужно «передать» изображение в JS код. Например: 

var img = document.createElement("img");

img.src = "path/to/image.png";

img.onload = function() {
    console.log("Image loaded");
    yourParentElement.appendChild(img);
}

или используйте библиотеку, которая сделает это за вас, например: https://github.com/verlok/vanilla-lazyload

...