Есть такая страничка:
http://yamaradg.narod2.ru/history/Your_Travel/index.html
На ней имеется один единственный чекбокс:
http://yamaradg.narod2.ru/history/checkbox.jpg
Когда файлы грузятся с винта то проблем не имеется - но при загрузке на хостинг - в IE происходит 'Тормоз' при смене картинок!?(во время клика)
Тоесть - сначала исчезает одна, затем пустое пространство и уже по истечении 0.5 секунд происходит появления другого бэкграунда.
Вопрос:
Почему это происходит и как это можно устранить?
P.S. Сам js код выглядит следующим образом:
// Dean Edwards/Matthias Miller/John Resig
function init() {
// выходим, если функция уже выполнялась
if (arguments.callee.done) return;
// устанавливаем флаг, чтобы функция не исполнялась дважды
arguments.callee.done = true;
// что-нибудь делаем
};
/* для Mozilla/Firefox/Opera 9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
/* для Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"javascript:void(0)\"><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // вызываем обработчик для onload
}
};
/*@end @*/
/* для Safari */
if (/WebKit/i.test(navigator.userAgent)) { // условие для Safari
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); // вызываем обработчик для onload
}
}, 10);
}
/* для остальных браузеров */
window.onload = init;
window.onload=function() {
myCheckbox.checked = true;
};
var myCheckbox = document.getElementById('myCheckbox');
var virtualCheckbox = document.getElementById('virtual_checkbox');
virtualCheckbox.onclick = function(){
if (myCheckbox.checked == true) {
myCheckbox.checked = false;
virtualCheckbox.style.backgroundImage='url(images/checkoff.png)';
}
else if (myCheckbox.checked == false) {
myCheckbox.checked = true;
virtualCheckbox.style.backgroundImage='url(images/checked.png)';
}
};
myCheckbox.onclick = function(){
if (myCheckbox.checked == true) {
virtualCheckbox.style.backgroundImage='url(images/checked.png)';
}
else if (myCheckbox.checked == false) {
virtualCheckbox.style.backgroundImage='url(images/checkoff.png)';
}
};
Заранее благодарен за ответ...
Спустя 56 минут, 41 секунда (14.03.2012 - 19:25) Nikitian написал(а):
Затык происходит из-за того, что картинка меняется на ту, которая ещё не подгрузилась. Тут 2 варианта решения: предзагружать картинку при загрузке страницы в невидимый блок, либо использовать принцип css спрайтов, когда все картинки объединены в одной.
Спустя 38 минут, 37 секунд (14.03.2012 - 20:03) Mike_Kharkov написал(а):
| Цитата (Nikitian @ 14.03.2012 - 16:25) |
| Затык происходит из-за того, что картинка меняется на ту, которая ещё не подгрузилась. Тут 2 варианта решения: предзагружать картинку при загрузке страницы в невидимый блок, либо использовать принцип css спрайтов, когда все картинки объединены в одной. |
Понял. Спасибо.
P.S. Если у вас будет возможность показать на примере этого кода - как предзагрузить картинку - то буду вам очень признателен.
(Поскольку в JS я новичёк и соответственно ещё много чего в этом деле не знаю...)
Спустя 6 минут, 16 секунд (14.03.2012 - 20:10) Nikitian написал(а):
Просто куда-нибудь вставить такой html:
<div style="position:absolute;width:1px;height:1px;overflow:hidden;top:-9999px;left:-9999px;">
<img src="images/checked.png" />
<img src="images/checkoff.png" />
</div>