Lazy loading wont work for responsive images in slick carousel - javascript

I have problem with lazy loading images in slick carousel. When I use devices that have screens below 980px, everything works as it should (load smaller images on demand). But when I am on screens with resolution greater than 980px it load all big images, than on demand load small image one at time.
.cshtml file
#{
Javascript.Includes.Add("views/home/home-ads-carousel.js");
Javascript.Code.Add("views.home.carousel.init();");
}
<div class="ad_carousel">
#foreach (var ad in homepageAds)
{
<div class="post__image-container">
<picture>
<source media="(min-width: 980px)" srcset="#(Configuration.URLs.MediaPath + ad.ImagePath)" />
<img class="post__featured-image" data-lazy="#(Configuration.URLs.MediaPath + ad.SmallImagePath)" />
</picture>
<div class="carousel_text">
<h2>#ad.Title</h2>
<p>#ad.CallToActionText</p>
</div>
</div>
}
</div>
.js file
(function($) {
var carousel = {};
carousel.init = function () {
this.carouselHolder = $('.ad_carousel');
this.carouselHolder.slick({
autoplay: true,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
initialSlide: 1,
lazyLoad: 'ondemand',
//fade: true
});
}
views.home.carousel = carousel;
})(jQuery);
thanks in advance.

Can you try
<picture>
<img class="post__featured-image" data-lazy="#(Configuration.URLs.MediaPath + ad.SmallImagePath)" />
</picture>
Instead of
<picture>
<source media="(min-width: 980px)" srcset="#(Configuration.URLs.MediaPath + ad.ImagePath)" />
<img class="post__featured-image" data-lazy="#(Configuration.URLs.MediaPath + ad.SmallImagePath)" />
</picture>
This should work!

Related

Pause Slick Slider while playing autoplay vimeo video not working

I created Slick Slide banners with iframe vimeo videos and images. I try to pause the current slider while playing the autoplay video.. I try with using "beforeChange' event for current slider pause, play only current slider video remain slider videos has to pause.. i don't understanding why not working where/what i am missing.
$(function() {
let $slideshow = $('.slick_slider');
$slideshow.slick({
initialSlide: 0,
autoplay: true,
autoplaySpeed: ImagePauses[0],
dots: false,
arrows: false,
fade: true
});
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
$slideshow.on('beforeChange', function(event, slick, currentSlide){
// pause old video (better performance)
if(!currentSlide) {
player.pause();
currentSlide.pause();
} else {
currentSlide.play();
player.pause();
}
});
});
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">
<div class="vimeo-wrapper">
<iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565964510" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
</div>
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
</div>
</div>

Video Background of slide on Slick Carousel Issues

There's a few issues with video backgrounds in the Slick.js carousel that I am running into.
HTML:
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="images/01.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/02.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/03.jpg">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" autoplay muted loop preload>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
JS:
$("#mySlick").on('init', function(event. slick){
$(".carousel-item-background").each(function(){
$(this).find('.bgVid').get(0).play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid(){
$("video[class='bgVid']").each(function(){
var ve = $(this);
var $video = ve.get(0);
if ($video.paused){
$video.play();
}
});
};
Barring the CSS I excluded, the slider loads and appears fine. I can click next and previous through the slider all the way around. The first time I click NEXT all through the slider, when I arrive at the video slide, the video will start from the beginning, and the first time I click PREVIOUS to the video slide, even if I have waited a few seconds for the video to start playing, I can see during the transition between the FIRST slide and the LAST slide that the video has progressed, but when the transition ends, the video rewinds to the beginning and plays from there. I have NO afterChange calls in my script.
The second issue I have is responsive. I have a media query in the CSS, if the window is less than 768px wide, the video is set to display: none. I have a jQuery function, if the window is 768px or larger, the media query is nullified and the reloadBGVid() function is called. But no matter how I target the .bgVid, it simply will not play the video again.
The code you posted in your question contains errors and does not work at all.
I cannot find a reason to have both autoplay attribute in video tag and oninit event handler.
Also it is not clear where you're calling reloadBGVid function.
So I'm just leaving for you the snippet below in hope it helps:
$(document).ready(function() {
$("#mySlick").on('init', function(event) {
$(".carousel-item-background .bgVid").each(function(i, e) {
e.play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid() {
$("video.bgVid").each(function(i, e) {
if (e.paused) e.play();
});
}
});
body {background: #259}
#mySlick {width:436px; height:300px; margin: auto}
video {width:426px; height:240px; object-fit:cover}
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?1">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?2">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?3">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" muted loop preload>
<source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">
</video>
</div>
</div>
</div>

how can i use b-lazy plugin with html5 "picture" tag

i want to use b-lazy plugin with "picture" tag.
here default src attribute used with "data-arc" attribute. and src attribute used for lazy loading image..but how can i use this plugin picture tag...? b-lazy plugin support html5 "picture" and "img" tag.(this is support info link)but how can i implement this..
This is my html code:
here is b-lazy plugin link B-lazy plugin
<picture class="b-lazy">
<source
media="(max-width: 767px)"
srcset="imagepath/imgname.jpg">
<source
media="(max-width: 1024px)"
srcset="imagepath/imgname.jpg">
<source
media="(max-width: 1920px)"
srcset="imagepath/imgname.jpg">
<source
media="(max-width: 3840px)"
srcset="imagepath/imgname.jpg">
<img
src="img/photos/h.jpg"
data-src-small=""
alt="The Oslo Opera House">
</picture>
This is my js code:
if ($("body").hasClass("page_id_images")) {
//Global blazy module starts
var bLazy = new Blazy({
breakpoints: [{
width: 767, // max-width
src: 'data-src-small'
},
{
width: 1024, // max-width
src: 'data-src-medium'
},
{
width: 1920, // max-width
src: 'data-src-desktop'
},
{
width: 3840, // max-width
src: 'data-src-large'
}],
error: function(ele, msg) {
var image = $(ele)[0];
if (msg === 'missing') {
console.warn("Custom ERROR: ", image, " data-src is missing\n");
} else if (msg === 'invalid') {
console.warn("Custom ERROR: ", image, " data-src is invalid\n");
}
}
});
}
here is a answer for this question what i am trying to find out..
<picture>
<source
media="(min-width: 650px)"
data-srcset="image-650.jpg" />
<source
media="(min-width: 465px)"
data-srcset="image-465.jpg" />
<img class="b-lazy"
data-src="default.jpg" />
</picture>

Swiper 3 with lazysizes

do somebody has experienced using Swiper 3 with lazysizes.
Although Swiper has it´s own lazyloading mechanism, i need to use it with sourcesets.
But don´t know how to start
So if somebody has an hint for me
thanks in advance
Got it.
So it seems to be quiet easy to combine Swiper 3 with lazysizes.
The Point is to include the Scripts in the right Order.
Put in Head
<style>
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
</style>
<script src="bower_components/respimage/respimage.js"></script>
<script src="bower_components/lazysizes/lazysizes.js" async=""></script>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
// my custom Media Queries
window.lazySizesConfig.customMedia = {
'--small': '(max-width: 640px)',
'--medium': '(min-width: 641px) and (max-width: 768px)',
'--large': '(min-width: 769px) and (max-width: 1024px)'
};
</script>
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="lazyload">
<picture>
<source data-srcset="a-1.jpg 1x, a-2.jpg 1.5x, a-3.jpg 2x" media="--medium">
<source data-srcset="b-1.jpg 1x, b-2.jpg 1.5x, b-3.jpg 2x" media="--large">
<source data-srcset="c-1.jpg 1x, c-2.jpg 1.5x, c-3.jpg 2x" media="--small">
<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="d-1.jpg 1x, d-2.jpg 1.5x, d-3.jpg 2x" class="lazyload">
</picture>
<script>window.respimage&&window.respimage({elements:[document.images[document.images.length-1]]})</script>
</figure>
</div>
<div class="swiper-slide">
<figure class="lazyload">
<picture>
<source data-srcset="e-1.jpg 1x, e-2.jpg 1.5x, e-3.jpg 2x" media="--medium">
<source data-srcset="f-1.jpg 1x, f-2.jpg 1.5x, f-3.jpg 2x" media="--large">
<source data-srcset="g-1.jpg 1x, g-2.jpg 1.5x, g-3.jpg 2x" media="--small">
<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="h-1.jpg 1x, h-2.jpg 1.5x, h-3.jpg 2x" class="lazyload">
</picture>
<script>window.respimage&&window.respimage({elements:[document.images[document.images.length-1]]})</script>
</figure>
</div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
Before closing body
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/swiper/dist/js/swiper.jquery.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
preloadImages: false,
lazyLoading: false,
observer: true,
autoplay: 4000,
autoplayDisableOnInteraction: true,
onSlideChangeEnd: function(swiper) {
activeSlide = swiper.slides.eq( swiper.activeIndex );
slideLazy = activeSlide.find( $( '.image-inview' ) );
// disable Autoplay during Image preload
if (slideLazy.hasClass('lazyload')) {
swiper.stopAutoplay();
}
}
});
// Capture load Event, will be fired when Image is Ready
document.addEventListener('load', (function() {
var onLoad = function() {
swiper.startAutoplay();
};
return function(e) {
$(e.target).filter('.image-inview').each(onLoad);
};
})(), true);
</script>
Now this works with Autoplay too.

jQuery Overlay issue

My jQuery overlay is this
$(function() {
$("#triggers a[rel]").overlay({
top: '24%',
effect: 'apple',
fixed: false,
mask: {
color: '#0f0f0f',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
effect: 'apple',
onBeforeLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(div.contentWrap);
}
});
});
and my HTML code is this
<div class="apple_overlay" id="overlay1">
<div class="contentWrap">
<div class="video-js-box">
<video class="video-js" height="191px" width="246px" controls="controls"
preload="auto" poster="url">
<source src="url" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
</div>
</div>
My problem is, video player(videoJS) loaded behind overlay. How to Wrap this video player into the overlay. I think there is problem with onBeforeLoad: in jQuery please help me
Give video video-js-box class a high z-index, 99999999 for an example and see if that works.

Categories

Resources