Add loader animation until images are loaded

[buddh4]

No description provided.

[UtmostCreator]

I believe it is already in place. As if when I click on the image there's a small loader in the middle of the screen

[luke-]

@MasterMindNET I think this is also about a loader for the preview pictures.
@buddh4 Or can we close this issue?

[buddh4]

When opening the gallery overview or a gallery the preview image loading is not smooth. Each gallery item should be rendered with a loading animation until the preview image is fully loaded.

[UtmostCreator]

Hello, @buddh4!

Please could you give me some ideas/advice on how we can add smothe the animation?

How would you animate it?
the class called slide-loading is used for this.
I tried to add
transition-property: all; transition-duration: 1s;
But this did not help.

I also trying to detect by jQuery like this:

  $('.slide-loading').fadeOut('slow', function () {
        console.log('fadeOut');
        $('.slide').fadeIn('slow', function() {
            console.log('fadeIn');
        });
    });

in resources/js/gallery.js file. But it does not call a funtion even if I specify just before this line module.export({ console.log.
Help me out, where should I put the JS code i needed, or could give and idea on how to to in in CSS?

I am looking forward to hearing from you!
Thank you!

[UtmostCreator]

Hi, @luke-, @buddh4!

Please take a look at this PR link to PR;
I have added a preview transition; The first time you open it is slow(because it needs some time to load images; to avoid tearing effect/sudden appearing); followed by acceleration in subsequent transitions;
Mobile ver. seems really good with this transition effects xD

There is a bit strange principle in blueimg-gallery of the (slide-loading class, which is added when it is loading);

Please let me know what you think about these changes. If you wish to see some loader, let me know how it should look like!
It also would be good if you would give some ideas on implementation on this. (How could I test this a bit better? I mean, how can I slow down the loading time of the image? Any ideas? to see more detailed about which classes it applied and how it looks like; because It loads almost the same second as I open it)