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

Тема в разделе "Другие языки", создана пользователем ingmar, 7 сен 2011.

Модераторы: Цукер
  1. ingmar

    ingmar Создатель

    Регистр.:
    6 мар 2009
    Сообщения:
    14
    Симпатии:
    0
    Доброго времени суток уважаемые форумчане. Хочу сделать предзагрузку картинок в онлайн-просмоторщике комиксов, но с 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$pagecount($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>
    Также уже готовый вариант предзагрузки реализован вот тут http://reader.imangascans.org/First_Love_MALISA#1. Но выдрать не получилось к сожалению. Пути к файлам картинок имеют такую структуру сайт/manga/mangas/Имя_манги/Глава_манги/Список_изображений(отсортированы по алфавиту)
     
  2. steel_HILL

    steel_HILL Постоялец

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

    http://galleria.aino.se/
     
  3. jami

    jami Постоялец

    Регистр.:
    10 авг 2011
    Сообщения:
    114
    Симпатии:
    39
    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 с соотв. индексом при переключении в фотогалерее.

    http://stackoverflow.com/questions/...ache-images-for-quick-viewing-with-javascript