Skip to main content

Progressive Image Loading in Vue

Loading images onto a webpage takes time but vue eases the burden. 

The way to load an image into a webpage in web2py has three steps: 



1. Create database - PY:

db.define_table('images',
    Field('picture', 'upload', uploadfield='picture_file')
    Field('picture_file', 'blob'))

2. Access Database in controller and return the variable - PY: 

var = db().select() # simplified query


3. Now use the download function to display image - HTML:

<img src="{{=URL('default', 'download', args=picture_name)}}" />

It's all very straightforward. 


As you can see, web2py downloads each image individually before it displays it onto the webpage. This is very slow if you are downloading more than one image. To make my web pages seem faster, I used vue progressive image library. This library inserts a placeholder image until the image is fully downloaded by web2py. It's also pretty easy to implement as there are only 4 steps.



1. Import library at the bottom of the HTML <body> tags

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>


2. Create Vue Component - JS:

     Vue.component('blurry-image-loader', { //tag name
       props: [ //attributes for new tag
         'src',
         'smallSrc'
       ],
       data: function () {
         return {
           imageSrc: this.smallSrc
         }
       },
       template: '<img :src=imageSrc></img>', //small src inserted in front of src here
       ready: function () {
         var img, that;
         img = new Image();
         that = this;
     
         img.onload = function(){
           // I've added a timeout so you always see the blurry image
           setTimeout(function () {
             that.imageSrc = that.src;
           }, 2500)
         }
         img.src = this.src; //cementing changes
       }

     })


3. Initialize Vue - JS

     new Vue({
       el: 'body', //latching onto <body> tags
       data: {
       },
       delimiters: ["((","))"] //replacing {{}} with (())
     })



4. Insert New Component - HTML

<blurry-image-loader
        src="{{=URL('default', 'download', args=picture_name)}}" alt=""
        small-src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20"> <!--small src can be anything - its the placeholder-->
     </blurry-image-loader> 




This is one of the main libraries I used when updating my dating website. Now my pages are much faster. I may add more functionality in the future, but now I am going to focus a bit more on ajax, vuex and vue-router. SPAs incoming.



Stay Icy



Comments

Popular posts from this blog

How many lays can I get in 14 days - Long Term Field Report

What's up, reader. I was working on a mini coding project and had an epiphany. I'm going to approach and screen as many women as I possibly can for the rest of this month to see how many times I can get laid and if screening is truly the best method for me. ------RESULTS------- Screening is definitely for me.