Preloader Events

[Kemal-Sulic]

Shouldn't the preloader generally be bound to the unload event instead of the click?

$(window).bind('beforeunload',function(){ }

I'm not an expert on what might cause problems with this, but it seems to work fine for my site.

[crftwrk]

How do you mean that exactly?

[Kemal-Sulic]

`jQuery(document).ready(function ($) {

$(window).bind('beforeunload',function(){
    $("#preloader").fadeIn('fast');
    $('#status').fadeIn('fast');
    console.log('Preloading...');
})
$(window).on('load', function () {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
})
setTimeout(function () {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
}, 1500);

});`

Tell me what you think about this.

[crftwrk]

Yes, tested it and works fine. This is much more simpler and better. Want to create a pull request?

[crftwrk]

There is an issue with href="mailto" and download links. By clicking this links it fades-in the preloader but not out anymore. @Kemal-Sulic any idea how to disable this links to fade-in?

[Kemal-Sulic]

`jQuery(document).ready(function ($) {

let ignore_onbeforeunload = false;
$('a[href^=mailto]').on('click',function(){
    ignore_onbeforeunload = true;
});
$('a[href^=tel]').on('click',function(){
    ignore_onbeforeunload = true;
});

// Preloader
$(window).bind('beforeunload',function(){
    if (!ignore_onbeforeunload) {
        $("#preloader").fadeIn('fast');
        $('#status').fadeIn('fast');
    }
    ignore_onbeforeunload = false;
})
$(window).on('load', function () {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
})
setTimeout(function () {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
}, 1500);

});`

Hey, would this help? Can you tell me what you mean with download links? I tested it but it worked fine for me.

The way I tested download links is:

<a href="/images/myw3schoolsimage.jpg" download="w3logo"> <img src="/images/myw3schoolsimage.jpg" alt="W3Schools"> </a>

Late-Night-Edit** Changed the var to let and added tel click function.

[crftwrk]

What's about this?

jQuery(document).ready(function ($) {

  // Exclude links to fade-in
  let ignore_onbeforeunload = false;
  $('a[href^=mailto], a[href^=tel], a[data-fade="false"], .woocommerce-MyAccount-downloads-file').on('click', function () {
    ignore_onbeforeunload = true;
  });

  // Preloader
  $(window).bind('beforeunload', function () {
    if (!ignore_onbeforeunload) {
      $("#preloader").fadeIn('fast');
      $('#status').fadeIn('fast');
    }
    ignore_onbeforeunload = false;
  })
  $(window).on('load', function () {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
  })
  setTimeout(function () {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
  }, 1500);

});

We can add more links to exclude from fade-in if we found more. Users can manually set data-fade="false" attribute to a link.

If you agree with that, I'm happy when you do a new pull request.

[Kemal-Sulic]

Yes! :)

[crftwrk]

@Kemal-Sulic Something else, did you received my mail about the fashion theme?