Skip to content

Instantly share code, notes, and snippets.

@ivanmarkovich

ivanmarkovich/gist:53fbb76350bf06e722d4b4a8180b6b06

Created April 14, 2019 11:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ivanmarkovich/53fbb76350bf06e722d4b4a8180b6b06 to your computer and use it in GitHub Desktop.
Save ivanmarkovich/53fbb76350bf06e722d4b4a8180b6b06 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic loading
Raw
gistfile1.txt
<body class="dynamic-padding">
<div data-order="1"class="hide hidden-content"> </div>
<div data-order="2"class="hide hidden-content"> </div>
<div data-order="3"class="hide hidden-content"> </div>
<div data-order="4"class="hide hidden-content"> </div>
<div data-order="5" data-last="true" class="hide hidden-content"> </div>
<footer class="dynamic-hidden"> </footer>
</body>
<script>
$(function(){
dynamicLoading();
$(document).on('scroll', dynamicLoading);
})
var loadProgress = 1;
var loadLock = false;
function dynamicLoading() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if ( loadLock ) return false;
loadLock = true;
$('.float-loader').fadeIn(300);
//if element exists (php load done);
let element = $('.hidden-content.hide[data-order="'+loadProgress+'"]')[0];
let last = ( $(element).attr('data-last') == 'true');
if ( element ) {
setTimeout(function() {
$('.float-loader').hide();
$(element).fadeIn(200, function(){
loadProgress++;
loadLock = false;
if ( last ) {
loadLock = true;
$('footer').removeClass('dynamic-hidden');
$('body').removeClass('dynamic-padding');
}
});
}, 500);
};
}
}
</script>
<style>
.dynamic-hidden {
display: none;
}
.dynamic-padding {
padding-bottom: 40em;
}
.hidden-content {
display: none;
}
.float-loader {
display: none;
z-index: 2;
width: 80em;
height: 20em;
max-width: 80%;
position: fixed;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom:12em;
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/loader.gif);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment