search

ctrl-freaks / freezeframe.js

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
http://ctrl-freaks.github.io/freezeframe.js/
MIT License
1.41k stars 110 forks source link

How to lazy-load the GIF images with freezeframe? #64

Closed q2apro closed 4 years ago

q2apro commented 4 years ago

I am using "freezeframe.js v3.0.10" here: https://www.matheretter.de/tutorial and would like to lazy-load all the animations. Because it is 24 MB.

Is there a way to implement lazy-loading (only when the image comes into view, it is processed)?

Thanks!

q2apro commented 4 years ago

I used the lazy load plugin for this: 

    $(document).ready(function() {

        // loader icon for all lazy load images
        $("img.lazyload").each( function(){
            $(this).attr('src', '/img/template/loader.gif');
        });

        $("img.lazyload").lazyload({
            appear : function(elements_left, settings) {
                // console.log(this, elements_left, settings);
            },
            load : function(elements_left, settings) {
                // console.log('img loaded');
                $(this).freezeframe({
                    overlay: true, 
                    animation_play_duration: Infinity, 
                    non_touch_device_trigger_event: 'click' 
                });
            }
        });
    });

Source: https://appelsiini.net/projects/lazyload/ https://appelsiini.net/projects/lazyload/