[JS] Vue directive for smooth background-image loading

1-vue-background-image.js

Vue.directive('background-image',{
  update: function(url) {
    var el = $(this.el);
    el.css('transition','opacity 0.5s ease-in').css('opacity',0);
    var img = $('<img>', {
      src: url
    }).hide().on('load',function() {
      $(this).remove();
      el.css('background-image', 'url("'+url+'")').css('opacity',1);
    }).appendTo(el);
  }
});

2-vue-background-image-example.html

<div v-background-image="'/static/example.jpg'"></div>