Cfrgtkky

I need to display image/jpeg in my web application as well as android app with same code and used the below working javascript code for the same:

  var xhr = new XMLHttpRequest();

     xhr.open('GET', value, true);

     xhr.responseType = 'arraybuffer';

      xhr.onload = function (e) {

                    var arrayBufferView = new Uint8Array( this.response );

                    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );

                    var urlCreator = window.URL || window.webkitURL;

                    localSrc = urlCreator.createObjectURL( blob );

                    var img = new Image();

                    img.src=localSrc;

                    $('#jpg'+i).append(img);

       };

        xhr.send();

The performance is too slow when tested in android 4.4.2, like its waiting to send the xhr request after collecting all the image url's. Delay is more in android compared to web application .

How can I improve the performance ? Is there any other method to do the same with better performance?

Add xhr.timeout and have a look at time taken by the call . Hope it will help.

let startTime = new Date().getTime();

let value = 'https://jsonplaceholder.typicode.com/todos/1';

var xhr = new XMLHttpRequest();

     xhr.open('GET', value, true);

    // xhr.responseType = 'arraybuffer'; as i dont have such GET API

     xhr.timeout = 1000;

      xhr.onload = function() {

      console.log(`time taken to complete the req ${ new Date().getTime() - startTime} ms`);

      console.log(`Loaded: ${this.status} ${this.responseText}`);

      };

        xhr.ontimeout = () => alert('Timeout!');

        xhr.send();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So xhr.onload is not the cause of slowness . It might be taking too long because of your back End response . Check time taken to complete the request on backEnd also.