IFrames в HTML

Question

Я использую iframes в html.load различных html-страниц в iframes.in, что html-страницы у меня есть изображение. всякий раз, когда я загружаю изображение в iframes, я получаю мерцание.

мы можем остановить это мерцание, используя Ифрамы

Как это сделать?

Answer 1

Есть несколько вещей, которые вы можете сделать, чтобы помочь с этим.

Во-первых, убедитесь, что вы указали ширину и высоту изображения. Затем браузер зарезервирует место для изображения, а не изменит размер зарезервированного пространства, когда известен размер изображения.

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

Answer 2

Вы можете избежать мерцания, добавив событие обратного вызова onLoad в. Как только вы включите функцию обратного вызова onLoad, вы сможете добавить в iframe и его содержимое. Вот как работает Lazy Loading. Пример:

<iframe id="ifrm" src="http://www.example.com" onload="showImage()"></iframe>

В приведенном выше примере Iframe отобразит ваш контент. Как только вышеупомянутый iframe завершит загрузку, он попытается вызвать функцию showImage (). Все, что вам нужно сделать, это определить showImage в вашем файле скрипта. Теперь вы можете использовать эту функцию, чтобы найти узел DOM iframe и изменить стиль, чтобы добавить его или показать (display: block). Пример:

<script>
 function showImage() {
  var iframe = document.getElementById('ifrm'); 
  iframe.style.opacity = 1; // using opacity. You can transition this
  iframe.style.display = 'block' // using display. No transition
 }

</script>

Если вы хотите добавить его, вы можете добавить немного CSS в свой iframe, как показано ниже. Пример:

#ifrm {
  opacity: 0; // Before the iframe load, make sure it is not visible
  transition: 0.3s // This will make your iframe fade in on load
}

Надеюсь, это поможет.

Answer 3

Хм, я не совсем уверен, от какого мерцания вы хотите избавиться, но я думаю, это связано с загрузкой браузера, а затем отображением вашей новой страницы с изображением.

Ну, я не могу придумать никаких хороших способов, кроме загрузки следующего изображения в другой iframe на фоне и затем переключения между видимым в данный момент и вновь загруженным iframe.

Большой вопрос: зачем вам использовать фреймы? Вы загружаете что-то с сайта, который вам не принадлежит? Если нет, рассмотрите ajax и другие подобные методы.