Question

I am creating a multi-layered image editor using AJAX to send calls to a PHP script, then using a GD library to process the changes, save the new image and send the new image path back to the browser for AJAX to replace old with new.

This example, when you move a layer it seamlessly moves the layer without a single flicker of the image. This example uses a dll file to serve the image, I want to be able to achieve the same thing in PHP / JS.

Idea 1
I thought about applying a z-index to the current image and load the new image below it, once it’s loaded, hide the old image.

Idea 2
Set the image path to a php script which outputs the raw data of the compiled image direct to the browser.

Answer 1

if you want to replace the image “without a single flicker”, just preload the image
(load the image to a hidden img element or a Image javascript object and then show it on an onload callback)