php-lazyload-img

, _(*1)

Autoset html tags/attributes to lazy loading lossless/lossy images (gif, png, jpeg), _(*2)

Server side with PHP

Using a blank image and set width/height

Add 1x1 gif blank image in data:uri attribute to all tags in html
Set width and height attributes with original image size (Browser is going to rescale automatically with width/height attribute)

$html = '<!DOCTYPE html><html><head></head><body>



</body></html>';

$lazyload = new GlLazyLoadImg(__DIR__); //root directory parameter for relative url

$result = $lazyload->autoDataURI($html);

$result contain :, _(*3)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <img src="data:image/gif;base64,R0lGODdhAAEAAYAAAPz+/AAAACwAAAAAAAEAAQAC/oSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2Oz+v3/L7/DxgoOEhYaHiImKi4yNjo+AgZKTlJWWl5iZmpucnZ6fkJGio6SlpqeoqaqrrK2ur6ChsrO0tba3uLm6u7y9vr+wscLDxMXGx8jJysvMzc7PwMHS09TV1tfY2drb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f7/8PMKDAgQQLGjyIMKHChQwbOnwIMaLEiRQrWryIMaPGYI0cO3r8CDKkyJEkS5o8iTKlypUsW7p8CTOmzJk0a9q8iTOnzp08e/r8CTSo0KFEixo9ijSp0qVMmzp9CjWq1KlUq1q9ijWr1q1cu3r9Cjas2LFky5o9izat2rVs2x4rAAA7" data-original="img/test1.jpg">
        </div>
    </body>
</html>

Using a lossy image and set width/height

Add reduced gif image in data:uri attribute to all tags in html
Set width and height attributes with original image size (Browser is going to rescale automatically with width/height attribute)

$html = '<!DOCTYPE html><html><head></head><body>



</body></html>';

$lazyload = new GlLazyLoadImg(__DIR__,GlLazyLoadImg::LOSSY); //root directory parameter for relative url

$result = $lazyload->autoDataURI($html);

$result contain :, _(*4)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <img src="data:image/gif;base64,R0lGODdhSwBLAMQAAAQCBIyKjNTS1Dw6POzq7BwaHKyqrPT29BQSFFxeXAwKDLy6vPz+/AQGBJyenNza3ExKTPTy9CwuLPz6/GxqbMTCxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwBLAAAF/iAjjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHEycZVr5zL5tWY1APC4XC6a28+jxRveGETUdoFweCuCgXWGACUACoIME4lzBy6TJHEoAA0tcQQMBwcTFHCYozqXJ6UqAqkupzmui4orEqybtTawlrIqBbeFvjS5I8CPIgGZxa3EMsJ1mixyEJ3QyzHNDJGxcxUq1zPX2SUJgYS6uzjg5zAIl+XY1TDpM2UOcAKo8C/yNXAF+Oq4gOVLAQfBvx37Vrh79MbAQVPA3izU9dCEN2YC9xxCFEdjJgWkAPLLtDASnlV2Lp6F3DGRRbk1LU/E1DEThxoxOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdMdIQAAOw==" width="256" height="256" data-original="img/test1.jpg">
        </div>
    </body>
</html>

Client side with javascript

By example, you can use LazyLoad (aka Vanilla LazyLoad), _(*5)

02/10 2016

dev-master

9999999-dev https://github.com/emmanuelroecker/php-lazyload-img

lazy loading images

Sources Download

MIT

The Requires

The Development Requires

by Emmanuel ROECKER

by Rym BOUCHAGOUR

image progressive lazyload

library lazyload-img