2
我使用的是貓頭鷹旋轉木馬和Picturefill插件，我想懶加載主滑塊圖像。任何幫助，將不勝感激。在示例網址中，點擊「自適應」縮略圖（YouTube縮略圖之後的第二張圖片）。然後展開/收縮瀏覽器窗口，並根據瀏覽器的大小看到引用的映像正在更新。帶圖片填充的懶惰加載貓頭鷹旋轉木馬
URL示例：
http://dx1showroom.azurewebsites.net/picturefill/2.html
目標：
- 使用貓頭鷹旋轉木馬 - www.owlcarousel.owlgraphic.com
- 隨着Picturefill - http://scottjehl.github.io/picturefill/
- 同步同第二貓頭鷹轉盤滑塊
- 而延遲加載主滑塊
我已經工作：
- 貓頭鷹轉盤正在
- 已同步轉盤（主&縮略圖滑塊）
- 加載圖像with Picturefill
HTML：
<div class="thumbnail-frame">
<div id="sliderStatus" class="image-count">
<span class="glyphicon icon-camera"></span>
<span class="currentItem"><span class="result"></span></span>/<span class="owlItems"><span class="result"></span></span>
</div>
<div id="slideshow-main" class="owl-carousel main-frame col-sm-8 col-md-8 col-lg-9">
<div class="item video"><iframe width="563" height="422" src="//www.youtube.com/embed/GZL6piSl5P8?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div class="item">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/1300x867" media="(min-width: 1200px)">
<source srcset="http://placehold.it/1000x667" media="(min-width: 992px)">
<source srcset="http://placehold.it/800x533" media="(min-width: 768px)">
<source srcset="http://placehold.it/650x433" media="(min-width: 600px)">
<source srcset="http://placehold.it/460x307" media="(min-width: 400px)">
<source srcset="http://placehold.it/320x213" media="(min-width: 100px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="http://placehold.it/1300x867" alt="Picturefill Test">
</picture>
</div>
<div class="item video"><iframe width="563" height="422" src="//www.youtube.com/embed/akhmS1D2Ce4?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div class="item">
<picture class="lazyOwl">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg" media="(min-width: 1200px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=1000" media="(min-width: 992px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=800" media="(min-width: 768px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=650" media="(min-width: 600px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=460" media="(min-width: 400px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=320" media="(min-width: 100px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg" alt="Picturefill Test">
</picture>
</div>
</div>
<div id="slideshow-thumbnails" class="owl-carousel thumbnail-frame">
<div class="item"><a><img src="http://img.youtube.com/vi/GZL6piSl5P8/1.jpg" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90&text=Responsive" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://img.youtube.com/vi/akhmS1D2Ce4/1.jpg" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=300" alt="" class="img-responsive"></a></div>
</div>
</div>
的JavaScript：
$(document).ready(function() {
// Owl Slider Function
function sync(el){
var current = this.currentItem;
$("#slideshow-thumbnails")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#slideshow-thumbnails").data("owlCarousel") !== undefined){
center(current)
}
updateResult(".owlItems", this.owl.owlItems.length);
updateResult(".currentItem", this.owl.currentItem +1);
}
// Owl Slider Function
function center(number){
var owlSync2visible = owlSync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in owlSync2visible){
if(num === owlSync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>owlSync2visible[owlSync2visible.length-1]) {
owlSync2.trigger("owl.goTo", num - owlSync2visible.length+2)
} else {
if(num - 1 === -1){
num = 0;
}
owlSync2.trigger("owl.goTo", num);
}
} else if(num === owlSync2visible[owlSync2visible.length-1]) {
owlSync2.trigger("owl.goTo", owlSync2visible[1])
} else if(num === owlSync2visible[0]){
owlSync2.trigger("owl.goTo", num-1)
}
}
function updateResult(pos,value){
sliderStatus.find(pos).find(".result").text(value);
}
// Owl Slider
var sliderStatus = $("#sliderStatus");
var owlSync1 = $("#slideshow-main").owlCarousel({
singleItem : true,
slideSpeed : 500,
navigation: true,
pagination: false,
// itemsScaleUp: true,
afterAction : sync,
responsiveRefreshRate : 200,
navigation: true,
navigationText: [
'<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
'<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
],
afterUpdate : function() {
sliderMainMaxHeight('#slideshow-main');
posSliderControls('#slideshow-main');
posAlignImgVertically('#slideshow-main');
}
});
var owlSync2 = $("#slideshow-thumbnails").owlCarousel({
items : 8,
itemsDesktop : [1199,8],
itemsDesktopSmall : [992,8],
itemsTablet : [768,6],
itemsMobile : [520,3],
pagination:false,
responsiveRefreshRate : 100,
scrollPerPage: true,
navigation: true,
navigationText: [
'<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
'<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
],
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
},
afterUpdate : function() {
sliderMainMaxHeight('#slideshow-thumbnails');
posSliderControls('#slideshow-thumbnails');
posSliderImgCounter('#slideshow-thumbnails');
posAlignImgVertically('#slideshow-thumbnails');
}
});
$("#slideshow-thumbnails").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
owlSync1.trigger("owl.goTo",number);
});
$(".owl-carousel").fitVids();;
});