Reply To: Difference between preloading images and lazy loading images

[Shikkediel]

If you move the magnifier (on desktop) with the pen below, you’ll see that the new cursor is there immediately on mousedown. That’s because it’s preloaded (bottom of the script)… there would be a small period of “nothingness” in between until the second image is fetched otherwise.

Script

var icons = ['touch.cur','touch.png','swipe.cur','swipe.png'];

$.each(icons, function() {$('#deposit').append('<img src="' + location + this + '" alt=""/>')});

Demo

I also intend to add a progress bar to the spinner on the site by the way. That’ll give any visitor a better idea of what to expect.

One of the other few pages I’ve made uses a primitive form of lazy loading I suddenly remembered…

http://ataredo.com/design/fonts

function showNext() {

    $(window).bind('scroll', function(e) {

        if ($(window).scrollTop() > edge) {$('#image_02').show()}

        if ($(window).scrollTop() > edge+1250) {$('#image_03').show()}
        if ($(window).scrollTop() > edge+2500) {$('#image_04').show()}
        if ($(window).scrollTop() > edge+3750) {$('#image_05').show()}
        if ($(window).scrollTop() > edge+5000) {$('#image_06').show()}
        if ($(window).scrollTop() > edge+6250) {$('#image_07').show()}
        if ($(window).scrollTop() > edge+7500) {$('#image_08').show()}
        if ($(window).scrollTop() > edge+8750) {$('#image_09').show()}

        if ($(window).scrollTop() > edge+10000) {$('#image_10').show()}
        if ($(window).scrollTop() > edge+11250) {$('#image_11').show()}
        if ($(window).scrollTop() > edge+11500) {$('#image_12').show()}
        if ($(window).scrollTop() > edge+13750) {$('#image_13').show()}
    });
}

Time for a rewrite on that one, I believe.