I’ve written the below mix of PHP & Javascript to read image paths from a file to then preload using the Image JS object.
When I insert and alert() in there just to check it’s all executing it will only show if I insert it right after the “<script type=‘text/javascript’>” lines. This would indicate the code is failing at any of the three lines of code that the JS script includes. But which and why?
Here’s the code:
<?php
function PreloadImages() {
$preload_images_list_directory= "init/preload/";
$preload_images_list_file= "preload_list" .".php";
$preload_images_list_directory= $_SERVER['DOCUMENT_ROOT'].$preload_images_list_directory;
$preload_images_list_path= $preload_images_list_directory .$preload_images_list_file;
$image_counter = 0;
//open preload images list file
$preload_list_file = fopen("$preload_images_list_path", "r") or die("can't open file [SOURCE]");
//read the entire contents of source file into buffer
while (!feof ($preload_list_file))
{
$image_paths[$image_counter] = fgets($preload_list_file);
?>
```javascript
<script type='text/javascript'>
alert('Alert will show here but not if placed after the below lines of JS code');
//make new instance of image type variable
var img = new Image();
//assign an image source thus forcing the browser to preload the image
img.src = "<?php echo $image_paths[$image_counter] ?>";
//destroy image variable
img = null;
</script>
<?php
$image_counter++;
}
//close preload images list file
fclose($preload_list_file) or die("can't close file [SOURCE]");
}
?>
Maybe my question isn’t clear
Your browser doesn’t execute PHP code.
If it’s a .php file, the php code will be executed server side. The resulting code is sent to your browser. I was asking about that code. What do you see when you watch the code in your browser?
If it’s not a PHP file, then you’ll get JS mixed with PHP code in your browser, and that’ll never work.
The JS code is nested within the PHP code. Perhaps it’s not clear above due to not highlight properly. It’s within the
tags. I've cut out and pasted it below (just for clarity).
PHP enters and exits the JS script code area just fine, for example making it displaying just one line of JS code (an alert let's say) works fine. It's once the Image object lines of code are added that causes it to collapse.
The result from the JS code is a series of preloaded images. From what I could deduce this is the right way to preload images, and JS is the best option hence why I'm using it.
```javascript
<script type='text/javascript'>
alert('Alert will show here but not if placed after the below lines of JS code');
//make new instance of image type variable
var img = new Image();
//assign an image source thus forcing the browser to preload the image
img.src = "<?php echo $image_paths[$image_counter] ?>";
//destroy image variable
img = null;
</script>
Yes, the preload list file is read in via PHP server side and then the client side JS code kicks in and uses the PHP variable $image_paths[$image_counter] like so “<?php echo $image_paths[$image_counter] ?>”.
The PHP variable passed over to JS has the right values which I’ve checked via alert(‘<?php echo $image_paths[$image_counter] ?>’);
So if your question is what I see in the browser, my answer is nothing unless I explicitly tell the browser to show me something (i.e. do a PHP echo or JS Alert). There’s also no error messages.
P.S. The above code is placed within a .php file. The PHP is fine, it’s the JS that’s tripping over somewhere/somehow.
