Question

I need a preloader in JS for images. The images are fetched by a PHP script (to avoid opening the file structure to the user) and set as the attribute of the img tag. After the preload we wait for a event bound as an event listener to get fired (kind of like a slideshow).

var preloadImage = $('<img />').attr('src', 'getimage.php');
preloadImage.onLoad = function() {console.log('finished')}

The problem is, that of course onLoad does not work as it deals with the image being processed in the JS, while in this case we are waiting for the PHP to finish getting the image. The php script is just like this

<?php
header("Content-type: image/png");
readfile('image.png');
?>

Anyone has an idea how in this case i can make the JS wait till the php has finished loading?

Answer 1

As DaveRandom answered the question perfectly in the discussion above, here is the final code. preloadImage is a jQuery object which means that one needs to pass the .load() function.

var preloadImage = $('<img />').attr('src', 'getimage.php').load(function() {console.log('finished')})