javascript/jquery: load pictures from remote server based on size

Question

I have an array of scraped picture urls (So the pictures are still on the remove server). What I would like to do is check the dimensions of every picture and load only bigger ones (certain width/height) in the browser. I think I have to load the pictures first before checking the size, but how would you implement this that not all are shown but only bigger ones? Is this even possible?

Answer 1

Assuming your Array is Server-Side and in PHP

You can get image sizes with the php function getimagesize() which will return an array, containing the height and width (along with some other meta information). If the height and width match your criteria, you can add them to an output array that you can convert to json and send back to your jQuery script.

Assuming the image-references are in Javascript

You'll have to actually load the images to determine their dimensions. They don't have to be visible though. You can check their width by using the $.width() method and their height by using the $.height() method. If the dimensions meant your criteria, show the image.

$(function(){
  
  var images = ['image1.jpg', 'image2.jpg'];
  
  $(images).each(function(){
    // Create our Image
    currImage = document.createElement('img');
    // Add it and hide it
    $("body").append( $(currImage).attr('src', this).hide() );
    // Determine whether it should stay
    (currImage.width < 200) ? $(currImage).remove() : $(currImage).show() ;
  });
  
});

Answer 2

You definitely need to load them all first, there's no way to get the width/height without doing so. However, you can check the dimensions before actually displaying them:

var img = document.createElement('img');
img.onload = function() {
  if (img.width > ... && img.height > ...)
    document.getElementById('some_container').appendChild(img);
  else
    img = null;
};
img.src = 'filename.jpg';
// update as per @Orbling's comment:
if (img.complete)
  img.onload();

Answer 3

Another possibility would be to create new Image() objects and set their sources to be each of the urls in the array. attach an onload handler to the image and query its size before deciding whether or not to inject it into the document body.

I don't believe you'll be able to do this reliably without retrieving ALL the images in full from the server but you may be able to do AJAX HEAD requests to get a pictures filesize - assuming the server(s) in question respond as appropriate. This would allow you to filter out pictures which are obviously too small.

Answer 4

I think after getting the images you can loop on them and get width and hight of each one and by that you can get which is bigger than others.

These questions answers may help you: Get the real width and height of an image with JavaScript? (in Safari/Chrome)

How to get image size (height & width) using JavaScript?

Answer 5

The best way to do this type of operation is to have some sort of web service that you can query to find the image sizes (or perhaps return the array, pre-sorted, with their image sizes) to the javascript.

A PHP page placed in the image directory can be called, and used to scan the images, sort the array by size, and return the array in JSON, XML, or HTML to your JS Code for displaying.