Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум (новые сообщения вниз) Структурный форум

тема: Динамичное использование background-image

Сообщения:  [1-10]    [11-20]  [21-25] 

 
 автор: АЯ   (08.11.2010 в 19:50)   письмо автору
 
   для: hin   (08.11.2010 в 19:11)
 

Если уберёте лишнее (сиречь идиотизм), то всё будет работать и в FireFox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var Urls = [
    'http://img.yandex.net/i/www/logo.png', 
    'http://www.google.com/logos/2010/xraydiscovery2010-ps.gif' // ЗДЕСЬ запятой НЕ НАДО!!!
]; 
for (var j = 0, t = [], l = Urls.length; j < l; j++) {t [j] = new Image (); t [j].src = Urls [j]}
</script> 
</head>
<body>
Кнопки для проверки загруженности картинок<br>
дают их реальную ширину, которую, не загрузив картинки, не узнаешь<br>
<input type="button" value="Yandex" onclick="alert (t[0].width)">
<input type="button" value="Google" onclick="alert (t[1].width)">

</body>
</html>

И запомните на будущее - теги комментариев (<!-- -->) внутри блоков <script> и <style> пишут только полные лохи.

  Ответить  
 
 автор: АЯ   (08.11.2010 в 19:37)   письмо автору
 
   для: hin   (08.11.2010 в 17:40)
 

И чем же оно интересно?
Тем, что снова ГИБРИД?
На этот раз из HTML+CSS?

Чем не устраивает РАБОТАЮЩИЕ варианты только на HTML и только на JS ?

  Ответить  
 
 автор: hin   (08.11.2010 в 19:11)   письмо автору
 
   для: hin   (05.11.2010 в 17:51)
 

Спасибо всем большое! В ходе тестирования был применен следующий метод.
Совместное использование JS и CSS
Выкладываю код страници

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
.loader{
   background:url(путь/1.gif) no-repeat;
   background:url(путь/2.gif) no-repeat;
   background:url(путь/2.gif) no-repeat;
   margin-left:-1000px;
}
-->
</style>
<script type="text/javascript">
<!--
var Urls = [ // тут пути картинок которые нужно подгрузить. 
    'путь/1.gif', 
    'путь/2.gif',
    'путь/3.gif',
]; 
for (var j = 0, t = [], l = Urls.length; j < l; j++) {t [j] = new Image (); t [j].src = Urls [j]}
}//--> 
</script> 
 
</head>
<body>
<div id="page">
</div>
<div class="loader"></div>
</body>
</html>

JS работает корректно везде кроме Firefox, а трюк с классом .loader срабатывает в Firefox на ура.
P.S. IMHO В данном случае не страдает разметка страницы, и можно сказать что стандарты учтены:)

  Ответить  
 
 автор: АЯ   (08.11.2010 в 17:46)   письмо автору
 
   для: hin   (08.11.2010 в 17:20)
 

"Или брюки оденьте, или шляпу снимите"(с)
Сиречь, незачем плодить безграмотные гибриды.

1. Или чисто HTML-решение применяйте, где
<body>
<div style="display: none">
<img src="путь_к_предзагружаемой_картинке_1">
<img src="путь_к_предзагружаемой_картинке_2">
...
</div>
...

-----

2. Или используйте чисто JS-решение.
При этом скриптовой блок должен находиться в заголовке (между <head></head>), а не хрен знает где, как у Вас - аж после </body>.
Надо так:
<head>
<script>
var Urls = ['путь_к_предзагружаемой_картинке_1', 'путь_к_предзагружаемой_картинке_2'];
for (var j = 0, t = [], l = Urls.length; j < l; j++) {t [j] = new Image (); t [j].src = Urls [j]}
</script>
</head>

  Ответить  
 
 автор: hin   (08.11.2010 в 17:40)   письмо автору
 
   для: hin   (08.11.2010 в 17:20)
 

Нашел интересное решение!
http://www.alexilin.ru/predvaritelnaya-zagruzka-izobrazhenij-s-pomoshhyu-css/
Буду тестировать!

  Ответить  
 
 автор: hin   (08.11.2010 в 17:20)   письмо автору
 
   для: Lelik   (08.11.2010 в 16:17)
 

Спасибо!
Просто очень интересно почему такие проблемы только с Firefox?
Даже самый косячный IE все нормально отображает.

  Ответить  
 
 автор: Lelik   (08.11.2010 в 16:17)   письмо автору
 
   для: hin   (08.11.2010 в 15:38)
 

используй способ предложенный тут

  Ответить  
 
 автор: hin   (08.11.2010 в 15:38)   письмо автору
 
   для: Lelik   (07.11.2010 в 16:14)
 

Всеравно, не все картинки подгружаются, именно в Firefox'e. Причем заметил, если три раза обновить страницу, то все картинки подгружены в норме.

  Ответить  
 
 автор: АЯ   (07.11.2010 в 16:59)   письмо автору
 
   для: Lelik   (07.11.2010 в 16:10)
 

Картинка ТОЧНО НЕ БУДЕТ загружаться, если display: none будет прописано в стилях непосредственно тега <IMG>.
Во всех остальных случаях - БУДЕТ загружаться.
Можете это проверить, если у Вас есть, например, MSIE SPY.

  Ответить  
 
 автор: Lelik   (07.11.2010 в 16:14)   письмо автору
 
   для: hin   (06.11.2010 в 18:27)
 

из-за чего хз, но такая фигня решается примерно следующим методом: создается блок (oElem) в который подгруженные картинки из массива (oImg) вставляются методом oElem.appendChild(oImg);


<body>
<div id="img_preload" style="position: absolute; overflow: hidden; width: 0px; height: 0px; left: -10000px;"></div>
</body>
<script type="text/javascript">
var image2preload = [ // тут пути картинок которые нужно подгрузить.
    'myimage.png',
    'myimage2.png',
    'images/ololo.jpg'
];
var oElem = document.getElementById('img_preload');

for(var i = 0, l = image2preload.length; i<l; i++) {

var oImg = document.createElement("IMG");
oImg.onload = function() {
oElem.appendChild(oImg);
}
oImg.src = image2preload[i];

}

  Ответить  

Сообщения:  [1-10]    [11-20]  [21-25] 

Форум разработан IT-студией SoftTime
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования