배경 이미지를 사용하는 올빼미 회전 목마와 함께 lazyloader를 사용하는 방법

Question

일반 인스턴트 태그 대신 이미지를 표시하기 위해 배경 이미지를 사용하는 반 올빼미 회전식 컨베이어가 있습니다. 이제 lazyloading을 슬라이더에 추가하여 슬라이드가 활성화되어있을 때만 이미지를로드하려고합니다. 올빼미 회전 목마는 좋은 기능을 가지고 있지만 작동시키지 못합니다. 어떻게이 일을 성취 할 수 있습니까?

내 슬라이더 :

// content articles 
$slider    = "SELECT * FROM `web_content` WHERE catid = 10 AND state = 1 AND featured = 1 ORDER BY ordering"; 
$slidercon   = $conn->query($slider); 
$slidercr   = array(); 
while ($slidercr[] = $slidercon->fetch_array()); 
?> 
<!-- Home - Slider --> 
<!-- ++++++++++++++++++++++++++++++++++++++++ --> 

<section class="service-header home_slide_header"> 
    <? 
    $i = 1; 
    foreach($slidercr as $slider){ 
     $i++; 

     $slider_bgs = $slider['images']; 
     $slider_background = json_decode($slider_bgs); // Split JSON 

     if($slider_background->{'image_fulltext'} != ''){ 
      $bgimg = 'cms/'.$slider_background->{'image_fulltext'}; 
     }else{ 
      $bgimg = 'http://website/nl/cms/images/Projecten/Images/background_placeholder.jpg';  
     } 

     if($slider['id'] != ''){ 
      $backgrounds .= ' 
      <div class="lazy bg-slider sliderclass'.$i.'" style="background: url('.$bgimg.'); 
       background-repeat:no-repeat; 
       -webkit-background-size:cover; 
       -moz-background-size:cover; 
       -o-background-size:cover; 
       background-size:cover; 
       background-position:top;"> 
      </div>'; 
     } 
    } 

    echo $backgrounds; 
    ?> 
    <div class="container"> 
     <div class="row"> 
      <div id="owl-demo" class="owl-carousel owl-theme"> 
      <? 
       $a = 1; 
       foreach($slidercr as $slider1){ 
        $shortstr = substr($slider1['introtext'], 0, 100) . '...'; 
        $a++; 
        if($slider1['id'] != ''){ 
         $slidercontent .= ' 
         <div class="item" data-src=".sliderclass'.$a.'"> 
          <div class="bolletje"></div> 
          <p class="slide_header">'.$slider1['title'].'</p> 
          <div class="info_text"> 
          '.strip_tags($shortstr).' <a class="bekijkprojectindex infolink" href="'.$slider1['alias'].'.html">Bekijk project</a> 
          </div> 
         </div>';  
        } 
       } 
       echo $slidercontent; 
      ?> 
      </div> 
     </div> 
    </div> 
</section> 
?> 

그리고 내 회전 목마 코드 :

$(document).ready(function() { 
var old = ''; 
function setOld(){ 
     setTimeout(function(){ 
      old = $(".center").find('.item').data("src"); 
      $(old).fadeIn('1000'); 
     },50) 
} 

var owl = $("#owl-demo"); 
owl.owlCarousel({ 
     center: true, 
     loop:true, 
     lazyLoad:true, 
     autoplay: true, //Set AutoPlay to 3 seconds 
     responsiveClass:true, 
    responsive:{ 
       0 :{ 
         items:1, 
         loop:true 
       }, 
       900 :{ 
         items:3, 
         loop:true 
       }, 
    }, 
     nav: true, 
     navText: [ '<img src="home_slider/button_left.png" />', '<img src="home_slider/button_right.png" />' ], 
     navSpeed: false, 
     navElement: 'div', 
     navContainer: false, 
     navContainerClass: 'owl-nav', 
     navClass: [ 'owl-prev btn', 'owl-next btn' ], 
     onInitialized: setOld() 
}); 

owl.on('changed.owl.carousel', function(event) { 
    $(old).fadeOut('1050'); 
    setTimeout(function(){ 
     var src = $(".center").find('.item').data("src"); 
     $(src).fadeIn('1000'); 
     old = src; 
    },50) 
}) 

나는 다음과 같은 plugin을 사용하고 싶지만 나는 또한 올빼미 회전 목마 기능 here에서 빌드를 가지고 참조하십시오. 어느 것이 가장 좋습니까? 단순히 lazyLoad: true,을 추가하는 것은 저에게 효과적이지 않습니다.

Answer 1

저는 여러분이 달성하고자하는 것과 비슷한 것을 연구하고있었습니다. 이것은 내가 어떻게 작동하게했는지입니다. 올빼미 회전 목마에서이 개 문서

LazyLoad HTML 구조는 클래스 = "올빼미 - 게으른"및 데이터 SRC = "url_to_img"또는/및 데이터 SRC-망막 = "url_to_highres_img"을 필요로한다. 위 설정을 다른 DOM 요소에 설정하지 않으면 올빼미가 이미지를 CSS 인라인 배경 스타일로로드합니다.

그래서 나는 그것이 브라우저에서 제대로 작동 얻을 CSS 미디어 쿼리를 조작 한 후 사업부 내 회전 목마 요소를 생성하고 데이터베이스에서 가져온 이미지 URL 에 데이터 SRC를 설정합니다. 이 도움이

희망, 아래 찾을 :

HTML :

<div class="owl-carousel owl-theme"> 
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div> 
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div> 
</div> 

CSS :

.slide-item{ position: relative; 
background-repeat: no- repeat; 
background-position: top center;background-size: cover;} 

CSS는 미디어 쿼리 :

@media screen and (max-width: 39.9375em) { 
.slide-item{min-height: 280px;background-position: center; background-size: cover;} } 
@media screen and (min-width: 40em) { 
.slide-item{ height: 360px; min-height: 360px;} } 
@media screen and (min-width: 64em) { 
.slide-item{ height: 600px; min-height: 600px;}} 

JS를 :

$('.owl-carousel').owlCarousel(
{ 
    lazyLoad:true, 
    items:1, 
    autoplay: true, 
    smartSpeed: 1500, 
    nav:false, 
    dots: true, 
    loop : true, 
    animateOut: "fadeOut" 
    } 
); 

참고 : https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html