load image after show

[Zarinia]

Hi,
How can i use load image like lazy load after image show
i used lazy load but not work correctly
please give me suggestion.
thanks

[alvarotrigo]

Take a look at this solution

If you still want to use Lazy Load plugin, I would recommend you to ask on its github issues forum as I don´t personally know how it works.

If you are using fullpage with the autoScrolling:true (which is the default option), take into consideration that the site is not scrolling normally, it is changing the top property of the site or adding a translate3d css3 effect which can be the cause of trouble with plugins which uses the scroll event, which might be the case with Lazy Load.

[Janosch7384]

I had problems with lazy load, too, so I created this workaround (lazy load no more needed!):

1.) Inside your images replace attribute src="whatever.jpg" with data-original="whatever.jpg"

2.) Add following events inside fullpage script:

$('#yourFullPageContainer').fullpage({
    onLeave: function(index, direction){},
    afterLoad: function(anchorLink, index){
        var activeSection = $('.section').eq(index -1);
        activeSection.find('img').each(function() {
            var imagePath = $(this).attr("data-original");
            $(this).attr('src',imagePath);
        });
    },
    afterRender: function(){
        var activeSection = $('.section').eq(0);;
        activeSection.find('img').each(function() {
            var imagePath = $(this).attr("data-original");
            $(this).attr('src',imagePath);
        });
    }
});

[alvarotrigo]

Yeah, exactly. That's a very similar principle to the solution I proposed in this topic.

That's the way to do it with this plugin. Using callbacks. Lazy load plugins usually use the positions of the elements in the viewport together with the scroll event, which won't be fired using fullpage as it doesn't really scroll but it use the top or the translate3d CSS properties to create the scrolling effect.

[Janosch7384]

Yep, but I needed a solution that works with image tags inside my HTML. :-)

[alvarotrigo]

Yeah, and that's a way to do it.

[nugjagoan]

Hi @Janosch7384

Your solution works (that's awesome), but somehow it effects the scrollOverflow option. It's just like as if I set the scrollOverflow 'false'.

Any idea? @alvarotrigo maybe? :)

Here's the code:

$('#fullpage').fullpage({
    //Navigation
    menu: true,
    anchors:['firstSlide', 'secondSlide', 'thirdSlide', 'fourthSlide', 'fifthSlide', 'sixthSlide', 'seventhSlide'],
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide', 'thirdSlide', 'fourthSlide', 'fifthSlide', 'sixthSlide', 'seventhSlide'],

    //Scrolling
    css3: true,
    scrollingSpeed: 300,
    autoScrolling: true,
    easing: 'easeInQuart',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: true,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,

    //Design
    verticalCentered: true,
    resize: false,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '4em',
    responsive: 0,

    //Events
    onLeave: function(anchorLink, index){
        if(index == 1,2,3,4,5,6){
            $("footer").slideUp(250);
        }
    },
    afterLoad: function(anchorLink, index){
        if(index == 7){
            $(".section").length && $("footer").slideDown(500);
        }

        var activeSection = $('.section').eq(index -1);
        activeSection.find('img').each(function() {
            var imagePath = $(this).attr("data-original");
            $(this).attr('src',imagePath);
        });
    },
    afterRender: function(){
        var activeSection = $('.section').eq(0);;
        activeSection.find('img').each(function() {
            var imagePath = $(this).attr("data-original");
            $(this).attr('src',imagePath);
        });
    }            
});

[alvarotrigo]

@nugjagoan Set the size of the image before loading the image. That way fullPage.js will create the scrollbar before you load the images.

Otherwise you would have to use $.fn.fullpage.reBuild() method after loading the images, but I'd recommend the first option.

[nugjagoan]

Thanks for fast reply @alvarotrigo :)

Solution #1: I'm sorry I don't understand, you mean I have to apply the width and height for each img?

I have uploaded my work, please kindly take a look it here: http://tokobayifika.com/test/index.htm
I can't scroll the section that have along content. But strangely, if I inspect element in Chrome (the inspect element's window goes up), then I can scroll the long page on a section.

Thank you very much :)

[alvarotrigo]

Use the width and height properties for the image with its final size.
http://www.w3schools.com/tags/att_img_width.asp

[nugjagoan]

Done: http://tokobayifika.com/test/index.htm

But still, jumping to next section without scrolling down on a long content. Please advice :)

[alvarotrigo]

Not sure whats going on, it might be because you are using display:table, just use reBuild then.

[nugjagoan]

I see. How should I use it? Put it after above code like this?

$('#fullpage').fullpage({
// ABOVE CODE
});

$.fn.fullpage.reBuild();

[alvarotrigo]

No, on the callback after you load the images.

[nugjagoan]

It works! Thank you!

[alvarotrigo]

Lazy loading has been implemented in fullPage.js 2.6.6.
You can read more about it here.

[thiru26]

i used full page js in my website. if i reloading my website it seems like this (https://abc.html/#sectionfour) .I want https://abc.html like this only after reloading is there any way to overcome this..
thanks,
thiru

[thisisfed]

@thiru26

$("#fullpage").fullpage({
lockAnchors: true
});

[thiru26]

its not working......