glicer/lazyload-img

图片懒加载

维护者

详细信息

github.com/emmanuelroecker/php-lazyload-img

主页

源代码

问题

安装: 22

依赖: 0

建议者: 0

安全性: 0

星标: 6

关注者: 1

分支: 0

开放问题: 0

语言：HTML

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

Requires

Requires (Dev)

MIT 3dbd8f64559efd2f976a553d6700683aded50b06

imagelazyloadprogressive

This package is not auto-updated.

Last update: 2024-09-14 19:36:46 UTC

README

Scrutinizer Code Quality Build Status Coverage Status SensioLabsInsight Dependency Status

自动设置HTML标签/属性以实现无损/有损（gif、png、jpeg）图片的懒加载

使用PHP的服务器端

使用空白图片并设置宽度和高度

  • 在所有HTML中的标签中添加1x1 gif空白图片到data:uri属性
  • 设置宽度和高度属性为原始图片大小（浏览器将自动使用width/height属性进行缩放）
$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包含

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

使用有损图片并设置宽度和高度

  • 在所有HTML中的标签中添加减小后的gif图片到data:uri属性
  • 设置宽度和高度属性为原始图片大小（浏览器将自动使用width/height属性进行缩放）
$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包含

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

使用javascript的客户端

例如，您可以使用LazyLoad（也称为Vanilla LazyLoad）