jQuery « [Решено] Как сделать ленивую подгрузку картинок в слайдере easySlider

Столкнулся с проблемой длительного времени загрузки страницы.
В шапке сайта висит слайдер. Пока там 3 картинки, каждая весит от 0,5 до 1 мб.
Картинок может быть больше.
Слайдер построен так, что картинки загружает сразу и выстраивает их просто со смещением. Соответственно плагин ленивой загрузки от jquery не прокатывает, по крайней мере с базовыми настройками, т.к. он реагирует на прокрутку страницы. По идее можно повесить событие свое, но вот как это сделать, в голову мысли не пришли.

Можно ли сделать хотя бы так, чтобы изначально загружалась картинка слайдера, которая активна. А остальные уже по мере загрузки страницы или по нажатию прокрутки слайдера?
0
javascript jquery slider слайдер

1 ответов


<div id="slider">

            <ul>
         
    <li class="sl-1" style="background-color: white">
      <div class='si_container'>
        <img class='slider_image' src='/joomla15/images/slider/10/2.png'>
      </div>
      <div class="box" style="margin: 40px 0 0 56px">
        <div class="table" style="background-color: white; box-shadow: 0 0 15px 3px white;-webkit-box-shadow: 0 0 15px 3px white;-moz-box-shadow: 0 0 15px 3px white"> </div>
        <div class="cont">
          <div class="film_img" style="background: url('/joo/3.png') center center"></div>

          <div class="vb"><a href="/joom">Смотреть</a></div>
        </div>
      </div>
    </li>
               
       
               
             
    <li class="sl0" style="background-color: ">
      <div class='si_container'>
        <img class='slider_image' src='/joomla15/images/slider/8/1.png'>
      </div>

      <div class="box" style="margin: 0px 0 0 0px">
        <div class="table" style="background-color: ; box-shadow: 0 0 15px 3px ;-webkit-box-shadow: 0 0 15px 3px ;-moz-box-shadow: 0 0 15px 3px "> </div>
        <div class="cont">
          <div class="film_img" style="background: url('/joomla15/images/_thumb2/2.png') center center"></div>
          <div class="vb"><a href="/joomla">Смотреть</a></div>
        </div>
      </div>
    </li>

               
       
        <span style="width:100%"></span>        
             
    <li class="sl1" style="background-color: black">
      <div class='si_container'>
        <img class='slider_image' src='/joomla15/images/slider/9/1.png'>
      </div>
      <div class="box" style="margin: 45px 0 0 -400px">
        <div class="table" style="background-color: black; box-shadow: 0 0 15px 3px #66C7ED;-webkit-box-shadow: 0 0 15px 3px #66C7ED;-moz-box-shadow: 0 0 15px 3px #66C7ED"> </div>
        <div class="cont">
          <div class="film_img" style="background: url('/joomla15/images/1.png') center center"></div>

          <div class="vb"><a href="/joom">Смотреть</a></div>
        </div>
      </div>
    </li>
               
       
               
           </ul>
        </div>
 

Вот что дает слайдер на выходе.
Визуально показать не могу, на локалке все, да и не одобрят, пока проект не сдан -)

Скрипт слайдера прописывает непосредственно в style.

Сам слайдер взят отсюда http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Решил так


  cnt_li = jQuery('.slider_ul li').length - 2;
  cnt_slider = 0;

 
  jQuery('#nextBtn').live('click', function() {
      cnt_slider++;
      jQuery("img.slider_image.cl" + cnt_slider).trigger("loadSlideImg");
    });
   
  jQuery('#prevBtn').live('click', function() {
      if(cnt_slider == 0) {
        cnt_slider = cnt_li;
      }
      cnt_slider--;
      jQuery("img.slider_image.cl" + cnt_slider).trigger("loadSlideImg");
    });
   
   
     
  jQuery("img.slider_image").lazyload({
    placeholder : root_folder + "templates/etokino/images/ll.png",
    effect : "fadeIn",
    event : "loadSlideImg"
  });
 

Только в выдаче скрипта сделал, чтобы нумеровались li элементы слайдов.
jQuery('.slider_ul li').length - 2 - минус два, т.к. изи слайдер добавляет свои два li элемента...
-1