| |
|
|
| | http://www.svoiludi-msk.ru/
Для создания динамичности при работе с картинками использовал background-image. Но как выяснилось появильсь сложности, вызванные со скоростью скачивания и как следствия отображения картинок.
Подскажите альтернативы моему способу, заранее спасибо. | |
| |
|
|
| |
|
|
| |
для: hin
(05.11.2010 в 17:51)
| | | сделать прелоадер или загружать все картинки сразу | |
| |
|
|
| |
|
|
| |
для: Lelik
(05.11.2010 в 18:15)
| | | А поподробней? С точки зрения реализации | |
| |
|
|
| |
|
|
| |
для: hin
(05.11.2010 в 18:49)
| | | (new Image()).src = 'images/myimg.gif'; | |
| |
|
|
| |
|
|
| |
для: sl1p
(05.11.2010 в 18:55)
| | | Не очень понятно, как ето едят:) | |
| |
|
|
| |
|
|
| |
для: hin
(05.11.2010 в 19:10)
| | | можно так:
вначале кода страницы вставляете:
<script type="text/javascript">
var image2preload = [ // тут пути картинок которые нужно подгрузить.
'myimage.png',
'myimage2.png',
'images/ololo.jpg'
];
for(var i = 0, l = image2preload.length; i<l; i++)
(new Image()).src = image2preload[i];
</script>
|
| |
| |
|
|
| |
|
|
| |
для: sl1p
(05.11.2010 в 19:47)
| | | Спасибо большое вроде работает намного лучше!!!! | |
| |
|
|
| |
|
|
| |
для: hin
(05.11.2010 в 20:30)
| | | Нашелся странный баг. В firefoxe не подгружаются с первого раза все картинки, при повторных обновлений страниц некоторые появляются, но не все.
Как вы считаете из-за чего это может быть? | |
| |
|
|
| |
|
|
| |
для: 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];
}
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(07.11.2010 в 16:14)
| | | Всеравно, не все картинки подгружаются, именно в Firefox'e. Причем заметил, если три раза обновить страницу, то все картинки подгружены в норме. | |
| |
|
|
| |
|
|
| |
для: hin
(08.11.2010 в 15:38)
| | | используй способ предложенный тут | |
| |
|
|
| |
|
|
| |
для: Lelik
(08.11.2010 в 16:17)
| | | Спасибо!
Просто очень интересно почему такие проблемы только с Firefox?
Даже самый косячный IE все нормально отображает. | |
| |
|
|
|
| |
|
|
| |
для: hin
(08.11.2010 в 17:40)
| | | И чем же оно интересно?
Тем, что снова ГИБРИД?
На этот раз из HTML+CSS?
Чем не устраивает РАБОТАЮЩИЕ варианты только на HTML и только на JS ? | |
| |
|
|
| |
|
|
| |
для: 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>
|
| |
| |
|
|
| |
|
|
| |
для: sl1p
(05.11.2010 в 18:55)
| | | это прелоадер для имиджей, а у человека бакграунды | |
| |
|
|
| |
|
|
| |
для: elenaki
(05.11.2010 в 19:23)
| | | мда, а бекграунд из чего? xD | |
| |
|
|
| |
|
|
| |
для: hin
(05.11.2010 в 18:49)
| | | без джаваскрипта это делается так:
<body>
<div style="position: absolute; overflow: hidden; width: 0px; height: 0px; left: -10000px;">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
...
</body>
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(06.11.2010 в 01:44)
| | | Это не есть хороший способ, ввиду не соответсвии стандартам:) | |
| |
|
|
| |
|
|
| |
для: hin
(06.11.2010 в 18:28)
| | | "ПавлиныСтандарты, говоришь?"(c)
Это - самый лучший способ!
Записать просто его надо попроще:
<body>
<div style="display: none">
|
и далее по вышеприведённому образцу. | |
| |
|
|
| |
|
|
| |
для: АЯ
(06.11.2010 в 23:39)
| | | при display: none сталкивался с такой штукой, что картинки могут не подгружаться, но это, вроде, если они заданы как фон блока... | |
| |
|
|
| |
|
|
| |
для: Lelik
(07.11.2010 в 16:10)
| | | Картинка ТОЧНО НЕ БУДЕТ загружаться, если display: none будет прописано в стилях непосредственно тега <IMG>.
Во всех остальных случаях - БУДЕТ загружаться.
Можете это проверить, если у Вас есть, например, MSIE SPY. | |
| |
|
|
| |
|
|
| |
для: hin
(06.11.2010 в 18:28)
| | | молодой человек, не забивайте себе голову всякой ерундой, ведь конечным результатом и целью для любого сайта являются пользователи, а не стандарты, на них (пользователей) и ориентируйтесь :) | |
| |
|
|
| |
|
|
| |
для: 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 В данном случае не страдает разметка страницы, и можно сказать что стандарты учтены:) | |
| |
|
|
| |
|
|
| |
для: 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> пишут только полные лохи. | |
| |
|
|
