Load overlay when page 'Loading'

JavaScript
1

I have built into my site an option to ‘Show All’ and this means that there could be up to 500 hotels trying to load onto a page, I am using lazyload too which cuts down on the time, and I’m also using some jquery to show an animated loading gif, but ideally what I need is an overlay that appears with an attractive loading page, so nothing can be touched until the page loads.

How can I adopt what I got to load this overlay instead of the animated gif.

<div class="show_more_main_b" id="show_more_main_b<?php echo $tutorial_id; ?>">
<span data-id="<?php echo $tutorial_id; ?>" data-id2="<?php echo $tutorial_id; ?>" class="show_more_b" title="Load more posts">SHOW NEXT <?php echo $showLimitOne ?> HOTELS</span><span data-id="<?php echo $tutorial_id; ?>" data-id2="<?php echo $tutorial_id; ?>" data-id4="<?php echo $showAll; ?>" class="show_more_c" title="Load more posts">SHOW ALL HOTELS</span>
<span class="loading" style="display: none;"><span class="loading_txt"></span></span></div>

.loading_txt {
background-image: url(ajax-loader.gif);
background-position: left;
background-repeat: no-repeat;
border: 0;
display: inline-block;
height: 16px;
padding-left: 20px;
}

<script>
$(document).ready(function(){
$(document).on('click','.show_more_c',function(){
var id = this.dataset.id;
var id2 = this.dataset.id2;
var id4 = this.dataset.id3;
$('.show_more_b').hide();
$('.show_more_c').hide();
$('.loading').show();
$.post('empty-Display.php', this.dataset, function (html) {
$('#show_more_main_b'+id).remove();
$('#displayDiv').append(html);
});
});
});
</script>
2

Here is an example: https://jsfiddle.net/xsfu63Lo/

3

Hi, the one issue I realised as I went down one root was that the page has already loaded as im using ajax, so by waiting for the page to load was the wrong way to do it, ideally i need some code that is waiting for images on the page to load.

Just looked at your code and was wondering how can I stop it once the page is loaded.

Something like this i was fancying, its just how to tie into the page thats already loaded so it knows when all the images on the page have loaded once I trigger a search, but as its in AJAX there no page refresh

http://jgerigmeyer.github.io/jquery-loading-overlay/demo/

4

Take a look

5

Have you tried https://ampproject.org?

Many large organizations have adopted the technique. Google caches pages and claims less than a second to render.

http://www.johns-jokes.com/pictures-amp/12345

Above is Amphtml test page requesting 12,345 thumbnails which are displayed in less than a second.

6

OOO that looks very daunting, I’m not sure how github works in honesty and have just jumped off it as soon as I go there usually, as dont really get it lol.

I’m going to try ans start somehting and then see how to get there.

Was thikning of somehting like this

<body>
<div style="display:none">
<div class="loader"></div>
</div>

$(document).ready(function(){
$(document).on('click','.show_more_b',function(){
var id = this.dataset.id;
var id2 = this.dataset.id2;
$('.show_more_b').hide();
$('.show_more_c').hide();
//$('.loading').show();
var nrOfImages = $("img").length;
$(".loader").fadeOut("slow");
$.post('empty-Display.php', this.dataset, function (html) {
$('#show_more_main_b'+id).remove();
$('#displayDiv').append(html);
});
});
});

.loader {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('ajax-loader.gif') 50% 50% no-repeat rgb(204,204,204);
}

At the moment the page loads and the overlay doesnt appear, so will start from here I think, but I’m not going to lie, I think this bit is a bit out of my depth so any help code wise would be veyr much appreciated

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.