CODEWITHSUNDEEP
phphtmlsqldatabaseimage
Vivek Vidyarthi
Vivek Vidyarthi

Reputation: 21

Load Up Images Quickly in Dynamic Website

So I have been working on a dynamic website with some 200-odd images on a certain page and currently, the website pulls up the information of my server and goes one by one on every single query. This is causing the website to load in 15 seconds. I wanted to know if I could make the images load in parallel or preload them, or any way for me to make this process faster

Many Thanks, Vivek

Upvotes: 2

Views: 195

Answers (1)

JCollier
JCollier

Reputation: 1179

It isn't best practice to load images from your sever, as talked about on point #6 on --this-- article. That article also has a lot of other good tips, such as lowering the quality of the image in a way that isn't perceptible to the human eye, to increase loading speed. Anyway, when the images are accessed from various URLs, you won't have this problem. It's pretty easy, as you can just load the images straight from the HTML. Here is a code sample:

var myImage = $("<img />").attr('src', 'https://myimageurl.net/myimage.jpg')
    .on('load', function() {
        if (!this.complete || this.naturalWidth == 0 || typeof 
this.naturalWidth == "undefined") {
            //error code
        } else {
            $("#thingToBeAppended").append(myImage);
        }
});

However, if you are dead set on loading your images from your server, one solution could be to use an asynchronous technique, such as jQuery.ajax(). Then your images would more or less be loaded in parallel, too.

Upvotes: 1

Related Questions