Customize the loading icon

cmodern's picture
cmodern
Fri, 09/28/2018 - 18:55
#1
Customize the loading icon

Hi, thanks for a great module. 

Unfortunately mega slider is very slow to load. It's always the last thing to load on the page by several full seconds, and since it's the first thing that people see (as most sliders are at the top of a page), it makes it seem like the whole site is just slow.

While your blue loading icon is cute, I'm wondering if I can replace it with a unique icon for each slider, perhaps with a few words appearing somewhere where the slider is. That way, people have something interesting to read instead of just watching the blue squares turn, and it makes the wait seem more intentional than just waiting for a very slow slider to load.

One option seems to be to just replace the default loading icon with a gif that's more related to the slider, but each slider will need its own unique words for people to read, so that it's actually new and relevant, and not just another annoying loading thing. I have 43 sliders, so just serving the same image or words won't cut it. 

Thanks in advance for your help!

cindy's picture
cindy
Sat, 09/29/2018 - 00:21

hello.

Are you using md-slider for drupal7 or drupal8?

Md-slider only plays when all files css, js and images are loaded.

If you are using drupal 8 with module BigPipe in drupal core enable, please note that Module Bigpipe will call functions drupal behaviors several times. This will slowdown our slider.

Solution: Uninstall module BigPipe

Or modify file md_slider/assets/js/frontend/init-md-slider.js as in this screenshot http://prntscr.com/l01phm

You can creat box loading for each page by following:

- 1: copy file template md-slider from our module md-slider => folder templates of your theme

drupal 8 : md_slider/templates/frontend/md-slider.html.twig

drupal 7: md_slider/templates/front/md_slider.tpl.php

- 2: remove the code here http://prntscr.com/l01tdy in the above copy file (in your theme)

- 3: debug your site site to get Slider's id  http://prntscr.com/l01uq5

then add css custom to display icon loading for each slider (based on ID in your theme's file style)

ex:

ID: md-slider-3-block

css:

#md-slider-3-block .wrap-loader-slider{
background: url(https://sagamer.co.za/wp-content/uploads/2015/03/loading-please-wait.png
https://sagamer.co.za/wp-content/uploads/2015/03/loading-please-wait.png
) center center;
}

Result : http://prntscr.com/l01wd2

There will be different icon loading for different id

Note: You can add html in tag <div class="wrap-loader-slider animated">

cmodern's picture
cmodern
Mon, 10/01/2018 - 01:10

Dear Cindy, thank you very much for your instructions, they are very helpful.

I'm using md-slider for Drupal 8 and looks like the BigPipe module was present as part of core but not installed, so no need to uninstall it.

So through your method I am indeed able to add a background image that makes some type of appearance before the slider loads. But I must have done something wrong in following your instructions, because now while we wait for the slider to load various images from throughout the site and words included somewhere in the sliders suddenly show up all jumbled together, and it just becomes a mess. See screenshots:  

https://prnt.sc/l0ojqh

https://prnt.sc/l0ojki

https://prnt.sc/l0oisw

But I did see the image I added show up there between all the others, a few seconds into the loading process, so something good is also happening. I also experimented with adding some HTML like you suggested, and see that it does show up as well. But the HTML would be the same for all sliders right? It would only be useful to use if I could have different HTML show up for each slider...

Could you please see if I followed your instructions correctly? I placed a copy of the file you mentioned in the following location: /themes/custom/my-theme/templates/frontend/md-slider.html.twig. I also tried it in the following location: /themes/custom/my-theme/templates/md-slider.html.twig  but that made no difference. Here's what the file looks like:

<div class="md-slide-items" {{ attributes}} >
    <div class="wrap-loader-slider animated">
<h1 >Test</h1>
    </div>
    {% for contentSlide in contentSlides %}
        {{ contentSlide }}
    {% endfor %}
</div>

Any ideas?

cindy's picture
cindy
Mon, 10/01/2018 - 04:21

Hello

In your above code, ID attribute of  the first tag div is missing.
The correct code should be:

 <div class="md-slide-items" {{ attributes}} >

If you want to add custom html in wrap-loader-slider, the code must include slider ID
For example, you can view code at frontend to get ID http://prntscr.com/l0q3f8 

Or check all slider's ID in database of table 'md_sliders' http://prntscr.com/l0q5in
Then add custom html with slider ID in file template of your theme http://prntscr.com/l0q7jo
Note: You can use custom html and custom css at the same time
After modifying file template, please clear drupal cache

You can send us your site url, admin account and FTP account to check your issue

cmodern's picture
cmodern
Mon, 10/01/2018 - 16:17

Thanks Cindy, I did include the ID attribute, it must be the bug on the MegaDrupal.com site that takes it out once you submit your comment (see your post above, it's also missing there). https://prnt.sc/l0xihi  https://prnt.sc/l0ximz

So I added the HTML statements you suggested, but unfortunately all the if and elseif statements are being ignored, only the final else statement is being displayed (so it just shows the same message for all sliders: <h2>Is a lovin community possible?</h2>). What went wrong, do you think? https://prnt.sc/l101ye

The CSS I was trying to use to display a background image was just creating too many problems. Here's what I was doing, do you see anything wrong? 

#md-slider-1-block .wrap-loader-slider{background: url("/sites/default/files/md-slider-loaders/initial.png") center center;background-repeat: no-repeat;background-size: cover;}

Right now I'm just doing all this locally, but I can try to upload it to a server to send you access too if that helps?

cindy's picture
cindy
Mon, 10/01/2018 - 22:42

Hello

Sorry, the id is missing somehow. Our forum does not regcognize and display all code correctly

The correct code should be:

<div> id="md-slider-{{ slid }}-block" class="md-slide-items" {{ attributes}} >

id in your css is correct. However, the variation name you use for command if elseif is incorrect
You should use slid (Slider ID), instead of slide,
And you need to edit: slide == 1, slide == 6,slide == 11,slide == 12

cmodern's picture
cmodern
Tue, 10/02/2018 - 00:53

Thanks Cindy, that got the HTML working, very helpful! (Not sure how because I did use "slid" before and was just testing using "slide", maybe it was stuck in caching...)

That already gives people something meaningful to read while the slider loads, instead of impatiently watching the loading icon, so that's a complete gamechanger.

I would like to have the option of getting the background images working if possible... So you didn't see anything wrong in that CSS code? Does using that exact code work for you? 

Thanks so much for your help!

cindy's picture
cindy
Tue, 10/02/2018 - 22:50

Hello

We check your css after editing slider id and image url and it works correctly

You can debug with Chrome like this screenshot https://prnt.sc/l1i67j

cmodern's picture
cmodern
Thu, 10/04/2018 - 14:33

Thanks Cindy for the reply. I did the debug with Chrome like you said, and the image does show (see the shaking hands here: https://prnt.sc/l28me4 ). The problem is not that the image isn't showing, but that many other images are also showing during the loading process. See these screenshots to see how it loads:  https://prnt.sc/l28qle  https://prnt.sc/l28r43 . The soccer field that appears is an image that appears in the second slide. The text in the center is what I added via the template file, but the text on top ("from quick and easy to deeply involved") is text from the thrid slide. Not sure why that would be loading also? It only happens for sliders that I designate through this CSS code:

#md-slider-11-block .wrap-loader-slider{}
cindy's picture
cindy
Thu, 10/04/2018 - 23:48

Hello,

If you use a transparent background image like this one

You need to set white background color or add background color to css

Without background color http://prntscr.com/l2ddhc

With backgoud color http://prntscr.com/l2defy

cmodern's picture
cmodern
Fri, 10/05/2018 - 13:41

Thanks Cindy, I tried it now without a transparent background, like this one of the ocean: https://prnt.sc/l2n2rn

It looks nice, but until it gets to that, it goes through a second or two of these other random images: https://prnt.sc/l2n626  and  https://prnt.sc/l2n6c1

It just shows other random elements from the slider until the background image that I set loads, so maybe showing a background image just makes it load too slow. I guess I'll just stick to HTML elements then, since that loads fast.

Thanks so much for all your help with this issue! I guess unless you have any other ideas to try, we can close out this ticket.

cindy's picture
cindy
Sun, 10/07/2018 - 23:54

Hello

Your background image's size is big and it affects loading speed. Please:
+ resize your file (background image of loading box)
+ add css to file style at frontend: .md-slide-item{display: none;}
+ add js to fully load backgound image before displaying slider. Open file md_slider/assets/js/frontend/init-md-slider.js
and replace:

listMegaSlide[i] = $(this).mdSlider(slider);

with:

var background = new Image(),
_self = this;
if(slid == 3){
background.src = '/core/themes/bartik/css/5852378-natural-wallpaper.jpg';
}
if(background.src){
$(background).on('load', function(){
$('#md-slider-' + slid + '-block .md-slide-item').show();
listMegaSlide[i] = $(_self).mdSlider(slider);
});
} else {
$('#md-slider-' + slid + '-block .md-slide-item').show();
listMegaSlide[i] = $(_self).mdSlider(slider);
}

Replace with your image link 

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.