渲染图像php缓慢加载铬

Question

I am using the next code to render my images:

// 1. Check if image exists
$image = glob("public/images/$category/$id/$name.*");

// Image exists
if(count($image) === 1) {
    // 2. Get file extension
    $path_parts = pathinfo($image[0]);

    // 3. Add the content type to the header
    switch(strtolower($path_parts['extension']))
    {
        case "gif":
            header("Content-type: image/gif");
            break;
        case "jpg":
        case "jpeg":
            header("Content-type: image/jpeg");
            break;
        case "png":
            header("Content-type: image/png");
            break;
        case "bmp":
            header("Content-type: image/bmp");
            break;
        case "svg":
            header("Content-type: image/svg+xml");
            break;
        default:
            self::setNotFoundHeaders();
            break;
    }

    // 4. Set the rest of the Header information
    header("Expires: Mon, 1 Jan 2099 05:00:00 GMT");
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    // 5. Get the size for content length
    $size= filesize($image[0]);
    header("Content-Length: $size bytes");
    // 6. Output the file contents
    readfile($image[0]);
}

The image loads perfectly in IE, Chrome and Firefox but while it takes 100 ms to load in IE and Firefox, it takes 5 seconds to load in Chrome. This is what the network tab of Chrome looks like:

Even if it takes 5 seconds to finish loading, the image is ready and visible at normal speed, in about 100 ms.

Also you can see in the image that the file type is "document" and not "image", idk why.

I have tried using different code to render the image but I got the same behavior:

$fp = fopen($image[0], 'rb');
fpassthru($fp);

What am I doing wrong? Am I missing some headers?

Thank you for your time!

Answer 1

There is nothing wrong in the code you posted except that the Content-Length header must specify only the number of bytes (without the word bytes).

header("Content-Length: $size");

Even with that minor mistake however your code should run fine.

I have some code that render images, I tried it with your exact headers ("bytes" mistake included) and inspected the result in Chrome web tools. The images are loaded normally.

Said that I would try one more thing adding this code after readfile()

// Flush (if any) all the buffers
while( ob_get_level() > 0 ) { ob_end_flush(); }

// Ensure script execution terminates here
exit();

If you still experience the problem I would consider the possibility that it's just a glitch in Chrome web tools. Expecially because you've noticed the image is actually loaded without delays.