Home Forums Porto Template Lazyload on Owl Carousel(s)

This topic contains 6 replies, has 2 voices, and was last updated by  JohnAlan 1 week, 1 day ago. This post has been viewed 73 times

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #10029341

    JohnAlan
    Participant

    Hi,

    I’m trying to add a lazyload onto the main image owl carousel on the page, as it has 63 fairly big images and there’s sometimes a delay in viewing the first one (when not cached).

    I’ve tried adding: –

    lazyLoad: true

    to the parameters for $thumbGalleryDetail2 in js/views/view.gallery.js, but this doesn’t seem to make any difference.

    Is there something else I need to do?



    Template Version: 7.3.0
    #10029343

    Support2
    Keymaster

    Hello,

    1) First you need add the option lazyLoad on the carousels:

    $thumbGalleryDetail2
    	.owlCarousel({
    		items: 2,
    		margin: 10,
    		autoHeight: true,
    		nav: true,
    		dots: false,
    		loop: false,
    		autoplay:true,
    		autoplayTimeout:7500,
    		autoplayHoverPause:true,
    		lazyLoad: true,
    		navText: [],
    		rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
    	})
    	.on('changed.owl.carousel', function(e) {
    		if (!flag) {
    			flag = true;
    			$thumbGalleryThumbs2.trigger('to.owl.carousel', [e.item.index, duration, true]);
    			flag = false;
    		}
    	});
    
    $thumbGalleryThumbs2
    	.owlCarousel({
    		margin: 15,
    		items: 4,
    		nav: false,
    		center: true,
    		dots: false,
    		lazyLoad: true,
    		rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
    	})
    	.on('click', '.owl-item', function() {
    		$thumbGalleryDetail2.trigger('to.owl.carousel', [$(this).index(), duration, true]);
    
    	})
    	.on('changed.owl.carousel', function(e) {
    		if (!flag) {
    			flag = true;
    			$thumbGalleryDetail2.trigger('to.owl.carousel', [e.item.index, duration, true]);
    			flag = false;
    		}
    	});

    2) Use this HTML structure for each image inside the first carousel:

    <img alt="Extensions by Finesse" src="img/blank.gif" data-src="img/finesse/galleries/extensions/680-wide/extensions-01.jpg" class="img-responsive owl-lazy">

    And this HTML for the images on second carousel:

    <img alt="Extensions by Finesse" src="img/blank.gif" data-src="img/finesse/galleries/extensions/161x161/extensions-01.jpg" class="img-fluid owl-lazy">

    * Note the data-src, src and the class owl-lazy.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029345

    JohnAlan
    Participant

    Thanks, that’s much better! Saves more than 5Mb on the initial page payload.

    One small issue is that on the second (navigation) carousel the thumbnail images are a little late to appear. Can this be improved upon? On both carousels I only lazy load from image #6 onwards, the first 5 are always loaded normally.

    If that’s not (easily) possible, I don’t mind only lazy loading the larger images, the smaller ones in the 2nd carousel can be loaded normally if they must be…

    Note: I’ve moved this test owl carousel gallery page to /gallery-owl?gallery=extensions (I’m also trying out a masonry alternative option)


    #10029347

    Support2
    Keymaster

    Hello,

    We couldn’t reproduce this issue here.
    In our tests the images from second carousel loads normally without delay.

    Maybe you mean this blank space ?

    In that case you should use items: 5 as option on the second carousel.

    Kind Regards,

    Rodrigo.


    #10029348

    JohnAlan
    Participant

    Thanks,

    Yes, that’s the issue. It wasn’t there before with items: 4 and no lazy load on 2nd carousel. You’ll see that it’s fine with the first 5 images (go right twice to centre image #3), image 6 onwards is lazyloaded and doesn’t appear when it’s at the edge, as in your screenshot.

    Changing items to 5 resolves the issue, but then the “half” image isn’t show anymore and I think that helps the user see there is more to see…

    I think removing lazy load from the 2nd carousel is the best option? They are much smaller images, anyway…


    • This reply was modified 1 week, 5 days ago by  JohnAlan.
    • This reply was modified 1 week, 5 days ago by  JohnAlan.
    #10029356

    Support2
    Keymaster

    Hello,

    Oh right. You can have this effect using items: 5 as options and adding the code below in (css/custom.css):

    #thumbGalleryThumbs2 {
        width: calc(100% + 30px);
    }
    
    #thumbGalleryThumbs2 .owl-stage-outer {
    	width: calc(100% - 30px);
    }

    Kind Regards,

    Rodrigo.


    #10029392

    JohnAlan
    Participant

    Thanks again!


Viewing 7 posts - 1 through 7 (of 7 total)