Callbacks about parallax.js

[maija-brazen]

To do stuff when parallax images are loaded, I can warmly recommend using this plugin:
https://github.com/adampietrasiak/jquery.initialize/blob/master/jquery.initialize.js
and do for example

$('.parallax-slider').initialize(function() {
// 
});

[mikegreiling]

Essentially, this plugin just sets up the slider elements, then runs a requestAnimationFrame on 'load', 'resize', and 'scroll' events. Rather than a "before" hook, couldn't you just run some code prior to the call to the .parallax() method? The "during" code could be called immediately after the constructor, and the "after" code could be added to an onload trigger for the image within .parallax-slider. Do you have a specific use case in mind?

[darknailblue]

That makes a lot of sense, but doesn't take into account having multiple parallax images on the page. Attaching a load event for each .parallax-slider is a good idea but the problem is that '.parallax-mirror' doesn't refer back to which element is defined as being a parallax element.

[darknailblue]

My JS looks like this so far and allows some cool loading animations with CSS

$('.parallax-background').each(function(index, el){
    var image = $(el).data('data-image-src');
    $(el).parallax({imageSrc: image });

    $('.parallax-slider').on('load', function(){
        $(el).removeClass('light').removeClass('dark');
    });
});

CSS looks like such

.parallax-background {
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

.parallax-background.light {
    background: #fff;
    color: #000;
}

.parallax-background.dark {
    background: #000;
    color: #fff;
}

[mikestreety]

I'm also after an onLoad or similar callback, as the image get's created but still takes a "moment" to apply to CSS. I'm trying to avoid the flash of no image.

[TheJester12]

Agreed, some kind of callback after everything loads would be helpful.

[dimandzhi]

I've found an alternative for this callback. Since parallax image is loaded into

<img class="parallax-slider">

we can use its loaded state. Something like this:

$(".parallax-slider").on("load", function() {
    $(window).trigger("resize").trigger("scroll");
    // Other code...
});

[wstoettinger]

would #192 be sufficient for this?

[wstoettinger]

please refer to #192 for future reference