0

I have ajax navigation on this website, and I have a preloader black dot that shows up for 4 seconds and disappears. Is there any better way to make it to wait until at least 1st image is loaded, or all?

here is my website : http://www.joe-tsao.com/

and here is the code for preloader

var id = jQuery(this).parent().attr('data-id');
var ajaxurl = admin_ajax.admin_url + 'admin-ajax.php';
var data = {
  'action': 'hb_load_page',
  'id': id
};
// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
jQuery.post(ajaxurl, data, function(html) {
  jQuery('.page-details').html('<div class="row">' + html + '</div>');
  setTimeout(function() {
    jQuery('.hb-loader').hide();
  }, 4000);
});
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Zarko Zivkovic
  • 27
  • 6
  • Wait for it what? Preload or dot? Also please check and fix the errors in your console – mplungjan Dec 29 '16 at 16:08
  • wait for images to load, when you click on projects on the left side, images and text appear on the right side. Black dot is preloader and it should wait untill images are loaded on the right – Zarko Zivkovic Dec 29 '16 at 16:31

1 Answers1

1

You can use .done method, as shown in official docs:

jQuery.post(ajaxurl, data, function(html) {
    jQuery('.page-details').html('<div class="row">' + html + '</div>');
}).done(function(data){
    jQuery('.hb-loader').hide();
});

https://api.jquery.com/jquery.post/#jQuery-post-url-data-success-dataType

Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
  • I added your code, and check it do ctrl + f5 and click on the right side project called "Hakt Task Lamp". Do you see how image loads slowly after black dot disappears? – Zarko Zivkovic Dec 29 '16 at 16:34
  • Look at preloading images: https://stackoverflow.com/questions/476679/preloading-images-with-jquery – Serg Chernata Dec 29 '16 at 16:39
  • I dont need to preload images, I just need black dot to wait until images on the project page are loaded so that slow loading wont be visible – Zarko Zivkovic Dec 29 '16 at 16:42
  • Yeah that's preloading of images. Wait for them to fully load and only then hide the dot. – Serg Chernata Dec 29 '16 at 16:43
  • Yes but I have different images on each project page, so I need to add all images to that array? and I will be adding more projects, so I guess I have to add a way to preload all images of the website, right? – Zarko Zivkovic Dec 29 '16 at 16:46
  • It can be a dynamic function that just grabs images and preloads them. It doesn't have to be hardcoded. There are also plugins. – Serg Chernata Dec 29 '16 at 16:47