[Javascript] Предзагрузка картинок

ingmar · 7 Сен 2011

Доброго времени суток уважаемые форумчане. Хочу сделать предзагрузку картинок в онлайн-просмоторщике комиксов, но с js не знаком в принципе. Буду очень признателен за помощь. Собственно вот код php, отвечающий за непосредственный вывод картинок.

PHP:

if ($manga) {
	if ($chapter) {
		if ($page) {
			$img = "mangas/" . $manga . "/" . $chapter["folder"] . "/" . $pages[$page - 1];
			$imgsize = omv_get_image_size($img);
			$imghtml = "<img src=\"$img\" alt=\"\" width=\"" . $imgsize["width"] . "\" height=\"" . $imgsize["height"] . "\" class=\"picture\" />";
			
			$prev_page_path = omv_get_previous_page($manga_escaped, $chapter_number_escaped, $page, $previous_chapter);
			$next_page_path = omv_get_next_page($manga_escaped, $chapter_number_escaped, $page, count($pages), $next_chapter);
			
			if ($next_page_path) {
				$imghtml = "<a href=\"$next_page_path\">" . $imghtml . "</a>";
			}
			echo $imghtml;
		} else {
			echo "<div class=\"warn\">Вы не выбрали страницу!</div>";
		}
	} else {
		echo "<div class=\"warn\">Вы не выбрали главу!</div>";
	}
} else {
	echo "<div class=\"warn\">Выберите мангу для чтения</div>";
}

Код страницы html:

HTML:

<div class="pager">
 <span>Манга <select name="manga" onchange="change_manga(this.value)"><option value="0">Выберите мангу...</option><option value="Dengeki_Daisy" selected="selected">Dengeki Daisy</option></select></span>
 <span>Chapter <select name="chapter" onchange="change_chapter('Dengeki_Daisy', this.value)"><option value="5" selected="selected">5</option></select></span>
 <span><img src="themes/default/no-previous.png" alt="" /> Page <select name="page" onchange="change_page('Dengeki_Daisy', '5', this.value)"><option value="1" selected="selected">#1</option><option value="2">#2</option><option value="3">#3</option><option value="4">#4</option><option value="5">#5</option><option value="6">#6</option><option value="7">#7</option><option value="8">#8</option><option value="9">#9</option><option value="10">#10</option><option value="11">#11</option><option value="12">#12</option><option value="13">#13</option><option value="14">#14</option><option value="15">#15</option><option value="16">#16</option><option value="17">#17</option><option value="18">#18</option><option value="19">#19</option><option value="20">#20</option><option value="21">#21</option><option value="22">#22</option><option value="23">#23</option><option value="24">#24</option><option value="25">#25</option><option value="26">#26</option><option value="27">#27</option><option value="28">#28</option><option value="29">#29</option><option value="30">#30</option><option value="31">#31</option><option value="32">#32</option><option value="33">#33</option><option value="34">#34</option><option value="35">#35</option><option value="36">#36</option><option value="37">#37</option><option value="38">#38</option><option value="39">#39</option></select> of 39 <a href="Dengeki_Daisy/5/2"><img src="themes/default/next.png" alt="Next Page" title="Next Page" /></a></span>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div class="ads">
 <!-- Begin Advertisement -->
 <img src="ads.png" alt="Ads" width="468" height="60" />
 <!-- End Advertisement -->
 </div>
 </td>
 </tr>
 <tr>
 <td><a href="Dengeki_Daisy/5/2"><img src="mangas/Dengeki Daisy/5/Dengeki_Daisy_02_05_001[KRS].png" alt="" width="750" height="1200" class="picture" /></a></td>
 </tr>
 <tr>
 <td>
 <div class="ads">
 <!-- Begin Advertisement -->
 <img src="ads.png" alt="Ads" width="468" height="60" />
 <!-- End Advertisement -->
 </div>
 <script type="text/javascript">
 function omvKeyPressed(e) {
 var keyCode = 0;

 if (navigator.appName == "Microsoft Internet Explorer") {
 if (!e) {
 var e = window.event;
 }
 if (e.keyCode) {
 keyCode = e.keyCode;
 if ((keyCode == 37) || (keyCode == 39)) {
 window.event.keyCode = 0;
 }
 } else {
 keyCode = e.which;
 }
 } else {
 if (e.which) {
 keyCode = e.which;
 } else {
 keyCode = e.keyCode;
 }
 }

 switch (keyCode) {
 case 39:
 window.location = "http://animeaddict.ru/manga/Dengeki_Daisy/5/2";
 return false;

 default:
 return true;
 }
 }
 document.onkeydown = omvKeyPressed;
 </script>
 </td>
 </tr>
 <tr>
 <td>
 <div class="pager">
 <span>Манга <select name="manga" onchange="change_manga(this.value)"><option value="0">Выберите мангу...</option><option value="Dengeki_Daisy" selected="selected">Dengeki Daisy</option></select></span>
 <span>Chapter <select name="chapter" onchange="change_chapter('Dengeki_Daisy', this.value)"><option value="5" selected="selected">5</option></select></span>
 <span><img src="themes/default/no-previous.png" alt="" /> Page <select name="page" onchange="change_page('Dengeki_Daisy', '5', this.value)"><option value="1" selected="selected">#1</option><option value="2">#2</option><option value="3">#3</option><option value="4">#4</option><option value="5">#5</option><option value="6">#6</option><option value="7">#7</option><option value="8">#8</option><option value="9">#9</option><option value="10">#10</option><option value="11">#11</option><option value="12">#12</option><option value="13">#13</option><option value="14">#14</option><option value="15">#15</option><option value="16">#16</option><option value="17">#17</option><option value="18">#18</option><option value="19">#19</option><option value="20">#20</option><option value="21">#21</option><option value="22">#22</option><option value="23">#23</option><option value="24">#24</option><option value="25">#25</option><option value="26">#26</option><option value="27">#27</option><option value="28">#28</option><option value="29">#29</option><option value="30">#30</option><option value="31">#31</option><option value="32">#32</option><option value="33">#33</option><option value="34">#34</option><option value="35">#35</option><option value="36">#36</option><option value="37">#37</option><option value="38">#38</option><option value="39">#39</option></select> of 39 <a href="Dengeki_Daisy/5/2"><img src="themes/default/next.png" alt="Next Page" title="Next Page" /></a></span>
 </div>
 </td>
 </tr>
 </table>
 </td>
 <td class="mid_right"></td>
 </tr>
 <tr class="line">
 <td class="down_left"></td>
 <td class="down"></td>
 <td class="down_right"></td>
 </tr>
 </table>
 </div>

Соответственно приведенный в первом посте код отвечает за это:

HTML:

<a href="Dengeki_Daisy/5/2"><img src="mangas/Dengeki Daisy/5/Dengeki_Daisy_02_05_001[KRS].png" alt="" width="750" height="1200" class="picture" /></a>

Также уже готовый вариант предзагрузки реализован вот тут Для просмотра ссылки Войди или Зарегистрируйся. Но выдрать не получилось к сожалению. Пути к файлам картинок имеют такую структуру сайт/manga/mangas/Имя_манги/Глава_манги/Список_изображений(отсортированы по алфавиту)

steel_HILL · 7 Сен 2011

Нет смысла подгружать сразу все изображения - особенно если они тяжелые и их много. Лучше прикрутить какую-то галерейку на Jquery+AJAX. Например, вот эта наверно сможет подойти, если к ней свою тему на тематику комиксов прикрутить -

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

jami · 8 Сен 2011

HTML:

<script>
preloads = "red.gif,green.gif,blue.gif".split(",")
var tempImg = []

for(var x=0;x<preloads.length;x++) {
    tempImg[x] = new Image()
    tempImg[x].src = preloads[x]
}
</script>

Как-то так, далее указываем картинку из tempImg с соотв. индексом при переключении в фотогалерее.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

[Javascript] Предзагрузка картинок

ingmar

Создатель

steel_HILL

Постоялец

jami

Постоялец