要想进一步提升网页打开速度,可以上传的图片优化入手。
网页慢,无非是,一查询慢,二图片加载慢,三没有使用延迟加载,四图片数据太大。
根据这些原因,逐步解决,从而提升用户体验。
下面介绍一款插件Echo.js:
和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 Echo.js 非常小巧,压缩后不足 1KB。
使用Echo.js很简单,只需将data-echo属性添加到img标签即可直接将图像添加到页面中即可。
<body> <img src="img/blank.gif" alt="Pic" data-echo="img/pic.jpg"> <script src="dist/echo.min.js"></script> <script> Echo.init({ offset: 0, throttle: 0 }); </script> </body>
参数 | 说明 |
offset | 离可视区域多少像素的图片可以被加载 |
throttle | 图片延迟多少毫秒(ms)加载 |
来源:百度网盘 | 提取码:mjwh
发表评论