게으른 이미지에 대한 동적 데이터 -src를 변경하는 방법은 무엇입니까?

나는 호버 목록 상자를 가지고 있고 방문이 목록 상자의 내 주요 이미지 관련 이미지로 변화하지만 난으로 변경하려는 이유 게으른 부하 플러그인을 사용하고 연결하면 내 목록 상자가 일부 링크가 data-src되지를 src하지만 그것은 작동하지 않았다 어떻게 동적으로 처리 할 수 ​​있습니까?

그리고 한 가지 더 나는 내가 모르는 방법이 가능한 봇이라고 생각합니다. 영역을 떠나면 내 이미지가 기본 이미지로 변경되어야하지만 할 수 없었습니다.

내 주요 구조

HTML

      <div class="tur-list-box">

        <div class="tur-list-content">
            <figure>
              <img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası">
              <a href="#" class="figure-overlay">
                  <p class="tour-price">
                    <span class="price-big">73,</span>
                    <span class="price-little">40</span>
                    <span class="price-unit">TL*</span>
                    <span class="price-block">‘den itibaren</span>
                  </p>
              </a>
            </figure><!-- tur resim-->

            <div class="tur-details">
              <h3><a href="#">Hafta Sonu Turları</a></h3>
              <p>15 farklı program</p>
              <i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
            </div><!-- tur detay-->

        </div><!-- tur list content-->

        <div class="tur-list-toggle">
          <ul class="list-unstyled">
            <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Kakava ( Hıdırellez ) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
            <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
            <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA.jpg">Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
            <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
            <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja.jpg">Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
            <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
          </ul>
        </div><!-- acilir kapanir alan-->

      </div><!-- tur list box-->

및 JS

 $(".tur-list-box").hover(function(){
    $(this).find(".tur-list-toggle").stop().slideDown();
    $(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
  },function(){
    $(this).find(".tur-list-toggle").stop().slideUp();
    $(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
    var defaultImg = $(this).find("figure img").attr("data-src");
    console.log(defaultImg);
  });


$('.tur-list-toggle ul li a').hover(
    function(e) {
      e.preventDefault();  
      var getAttr = $(this).attr("data-img");
      $(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
      $(this).fadeIn(500);
    },
    function(e) {

    }
);

이미지를 가리키면 링크가 표시되고 링크를 방문하면 이미지가 변경 되어 데모를 볼 수 있습니다.