glicer/lazyload-img

lazy loading images

Maintainers

Details

github.com/emmanuelroecker/php-lazyload-img

Homepage

Source

Issues

Installs: 22

Dependents: 0

Suggesters: 0

Security: 0

Stars: 6

Watchers: 1

Forks: 0

Open Issues: 0

Language:HTML

dev-master 2016-10-02 11:59 UTC

Requires

Requires (Dev)

MIT 3dbd8f64559efd2f976a553d6700683aded50b06

imagelazyloadprogressive

This package is not auto-updated.

Last update: 2024-04-27 17:20:33 UTC

README

Scrutinizer Code Quality Build Status Coverage Status SensioLabsInsight Dependency Status

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

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><div><img src="img/test1.jpg"></div></body></html>';

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

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

$result contain :

<!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><div><img src="img/test1.jpg"></div></body></html>';

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

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

$result contain :

<!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)