clevel
Новичок
Preload картинок для текста, генирируемого JS динамически
Что есть: при помощи javascript при onload страницы формирую html следующего вида:
<img src=t.gif><img src=v.gif>bla bla bla<br>
<img src=t.gif><img src=t.gif><img src=v.gif>bla bla bla<br>
и запихиваю это в качестве содержания объекта на странице.
Это древовидное меню... Если это дело формировать на сервере средствами пхп, то получается для клиента очень большой выходной html файл, поэтому решил переложить работу на клиентский javascript, тем более, что данный скрипт делает кучу дополнительных операций, что не может не радовать.
В чем проблема: при формировании этого дерева ослик каждую картинку дергает с сервера, несмотря на то, что это всего две картинки .... то есть, при загрудке странице - t.gif - раз 150, и v.gif - раз 40...
Пробовал решить проблему следующим образом:
картинку в коде обозначил как <img id=ba>
в скрипте прописал так:
var ia=new Image(); ia.src='t.gif';
document.getElementById('ba').src=ia.src
Не прокатывает, все равно все картинки поочередно загружает с сервера. Данный факт отлавливаю сниффером HttpDetect (EffeTech HTTP Sniffer)
Поиском смотрел, и не только по форуму, но везде написано как сделать прелоад картинок, если есть события onMouseOver, onMouseOut (замена src картинок при данных событиях).
Какие есть пути решения данной проблемы?
-~{}~ 23.04.05 02:43:
вот тестовый пример для воспроизведения проблемы:
<html>
<head>
<title>test</title>
<script language=javascript>
function test(){
var i,str='';
for(i=0;i<500;i++) str+='<img width=19px height=18px src="/panel/2/t.gif">';
document.getElementById('ddd').innerHTML=str;
} //function test
</script>
</head>
<body onload="test();">
<span id=ddd></span>
</body>
</html>
Что есть: при помощи javascript при onload страницы формирую html следующего вида:
<img src=t.gif><img src=v.gif>bla bla bla<br>
<img src=t.gif><img src=t.gif><img src=v.gif>bla bla bla<br>
и запихиваю это в качестве содержания объекта на странице.
Это древовидное меню... Если это дело формировать на сервере средствами пхп, то получается для клиента очень большой выходной html файл, поэтому решил переложить работу на клиентский javascript, тем более, что данный скрипт делает кучу дополнительных операций, что не может не радовать.
В чем проблема: при формировании этого дерева ослик каждую картинку дергает с сервера, несмотря на то, что это всего две картинки .... то есть, при загрудке странице - t.gif - раз 150, и v.gif - раз 40...
Пробовал решить проблему следующим образом:
картинку в коде обозначил как <img id=ba>
в скрипте прописал так:
var ia=new Image(); ia.src='t.gif';
document.getElementById('ba').src=ia.src
Не прокатывает, все равно все картинки поочередно загружает с сервера. Данный факт отлавливаю сниффером HttpDetect (EffeTech HTTP Sniffer)
Поиском смотрел, и не только по форуму, но везде написано как сделать прелоад картинок, если есть события onMouseOver, onMouseOut (замена src картинок при данных событиях).
Какие есть пути решения данной проблемы?
-~{}~ 23.04.05 02:43:
вот тестовый пример для воспроизведения проблемы:
<html>
<head>
<title>test</title>
<script language=javascript>
function test(){
var i,str='';
for(i=0;i<500;i++) str+='<img width=19px height=18px src="/panel/2/t.gif">';
document.getElementById('ddd').innerHTML=str;
} //function test
</script>
</head>
<body onload="test();">
<span id=ddd></span>
</body>
</html>