在开发时因为需要实现图片后置加载,又因前端使用的是 Thymeleaf + JQuery,便想着用 lazyload 插件实现。但在实际测试中发现 lazyload 会重复请求两次资源(一次为触发懒加载资源时请求,一次为替换 src 属性时请求),相关代码片段如下:
发现这一点我立马就绷不住了,要知道我就是因为我的小破服务器发个图片要一直转啊转才要懒加载提高用户体验的,你倒好直接给我来个超级加倍转啊转,反正你 lazyload 拓展的功能也没多少,大不了我高度预加载、图片显示样式都不要了,自己写一个不行吗?说干就干,代码如下:
/**
* 延迟加载资源
* @apiNote 根据元素的 alt 属性获取 uri
* */
function lazyLoadByAlt(id, type) {
const $id = $('#' + id);
$id.attr(type, $id.attr('alt'));
}