Как избежать мерцания при освещении iframe?

Прежде всего, даже если мой вопрос о том, как обновить , без мерцания, любые другие предложения, которые помогут решить мою проблему, будут приветствоваться.Как избежать мерцания при освещении iframe?

Проблема: У меня есть сервер, который публикует «главную» страницу html. Между тем, он делает снимки (скажем, один в секунду) и сохраняет их на жестком диске. Я хочу, чтобы изображение отображалось на веб-странице и обновлялось.

Решение найдено: Я использую область <iframe></iframe>, где я помещаю другую страницу, содержащую только изображение. Затем эта вторая страница обновляется периодически. Таким образом, вся страница не обновляется, а только рамка изображения. Проблема в том, что это решение страдает от мерцания, которое возникает каждый раз, когда оно обновляется.

Вот код главной страницы (немного уплотняют):

<!DOCTYPE html><html><head><title>Blabla</title></head> 
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr> 
<table border="0"><tr height="480"><td width="640"> 

<!-- RIGHT HERE! --> 
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe> 

</td></tr></table> 
</body></html>

и второй веб-страницы, как это:

<!DOCTYPE html><html><head> 
<script type="text/javascript"> 
<!-- 
function f(t) 
{ 
    setTimeout("location.reload(true);", t); 
} 
--> 
</script> 
</head> 
<body bgcolor="#000000" onload="JavaScript:f(1000);"> 
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/> 
</body> 
</html>

Я новичок в JavaScript, так Я не притворяюсь, что этот фрагмент кода хорош, даже проходим. Не стесняйтесь давать мне совет.

Теперь, можно ли перезагрузить без мерцания? Я читал, что мерцания возникают, когда страница не полностью загружена. Я также читал около скрытых кадров включен и выключен во время загрузки и т. Д. Но я не могу найти хорошее решение.

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

EDIT 1: Большинство Android браузеры не поддерживают относительный размер изображения, как в моем примере. Используйте абсолютные значения пикселей на месте.

источник

2013-11-12 dom_beau

Перезагрузка iframe всегда будет мерцать. Но для этого вам не нужен ajax, просто таймер и трюк, чтобы избежать кеширования:

<!DOCTYPE html><html><head><title>Blabla</title></head> 
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr> 
<table border="0"><tr height="480"><td width="640"> 

<div> 
    <img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/> 
</div> 

</td></tr></table> 

<script type="text/javascript"> 
var theimg = document.getElementById("theimg"); 
var theurl = "../images/myimage.png"; 
setInterval(function() { 
    theimg.src = theurl + '?t=' + new Date().getTime(); 
}, 1000); 
</script> 
</body></html>

источник

2013-11-12 03:02:26 bfavaretto

Большое спасибо, он отлично работает. Только для образовательной цели я полагаю, что время добавления URL-адреса заключается в том, чтобы избежать повторного использования кэшированного изображения, а не для перезагрузки нового с тем же именем? –

Для всей информации большинство Android-браузеров ** не поддерживают «%» как размер ... ** Потребовалось немного времени, чтобы решить, но если вы хотите показать его на планшете/телефоне, используйте абсолютные пиксельные единицы. –

@bbfavaretto Твой анс идеален, но я думаю, что это утверждение ** Перезагрузка iframe всегда будет мерцать **, это неправильно. Эта проблема решена. [Bugzilla Mozilla] (https://bugzilla.mozilla.org/show_bug.cgi?id=238714). Можете ли вы предоставить нам еще один ан. – Prateek

Как избежать мерцания при освещении iframe?

ответ

Смежные вопросы