CODEWITHSUNDEEP
phphtmlimage
user75472
user75472

Reputation: 1295

How to load image in order?

I am working with php. I have images kept in order. When i do query the images comes in order but when they load they does not load in order. The small images load first and then big images. For example I have 5 images. These images should be loaded in order(1,2,3,4,5). But here its not happening. Image 4 loads first, then 2, 1 and so on. So what can i do for this problem? Hope to get solution.

Thanks in advance.

Upvotes: 0

Views: 701

Answers (5)

Pascal MARTIN
Pascal MARTIN

Reputation: 401022

If you are speaking about the order images are displayed by a web browser, you do not have much control over that, as long as you have several <img> tag on your page :

  • the browser will request the images from the server in the order it wants (most probably, the first <img> tag encountered will be the first image requested)
  • each image takes some time to download ; and each image is displayed when it's downloaded ; considering small images should be downloaded faster, small images should be displayed first... depending on the order they were requested -- see previous point.

In the end, if you want absolute control on the order the images are displayed, your initial HTML should probably not contain all the <img> tags: a solution would be to add those, in the right order, when the previous image is downloaded.

This can probably be done with some JavaScript code, to detect when an image is loaded (event "load") ; and when an image is loaded, just add a new <img> tag to the page, for the next one; and so on.
But I wouldn't go with such an idea: it won't work if JS is disabled, your images will not be seen by search engines.

Upvotes: 2

kehers
kehers

Reputation: 4160

As you should have guessed, image is loaded according to their sizes. Ofcourse, the smaller ones will load before the bigger ones. And yeah, as eyze said, wat about you preload them with a javascript preloader and display them in the right order?

Upvotes: 0

Darknight
Darknight

Reputation: 2500

Not sure how you would implement this in PHP, but in the past I have usually had the a 'order' field for each image, then the images were added dynamically according to the 'order' field.

Upvotes: 0

Alix Axel
Alix Axel

Reputation: 154553

Have you tried preloading them with a JavaScript library?

Upvotes: 0

mouviciel
mouviciel

Reputation: 67839

You can control everything on your web server, but nothing on network or browser sides.

A possible solution is to build a single image containing your five images and display each relevant portion to its dedicated position.

Upvotes: 1

Related Questions