Lazy Loading Images / Loading spinner

Posted 4 years ago - updated 4 years ago vuejs

Add this directive:

Vue.directive('img', {
    bind: function (el, binding, vnode) {
        var img = new Image();      
        img.src = binding.value;
        img.onload = function () {
            el.src = binding.value;;
            $(el).css('opacity', 0).animate({opacity: 1}, 1000)
        }
    }
});

Call in your template:

<img  src=/loading_spinner.gif" v-img="realImage">

where realImage is the actual url of the image, and loading_spinner.gif is what you want to show while waiting.

Vue1 version