图片懒加载懒人不懒
给图片添加 data-src 属性是图片懒加载的关键步骤。虽然可以遍历页面获取所有 img 元素，但这是一种 inefficient 的方法。
插件化思
你想要封装成插件，所以需要一个更有通用性的解决方案。考虑让后端服务器传输图片的原始尺寸（宽度和高度），然后使用 javascript 动态计算实际显示尺寸，并为未加载的图片设置 data-src 属性。
立即学习“前端免费学习笔记（深入）”；
后端配合
在后端，你需要使用图像处理库（比如 imagemagick 或 graphicsmagick）获取图像的原始尺寸。然后，将宽度和高度信息通过 http 响应头或 json 格式的数据返回给浏览器。
前端处理
在前端 javascript 中，获取响应头或 json 数据，并使用 javascript 动态计算图片的实际显示尺寸。对于未加载的图片（即尚未请求的图片），设置 data-src 属性值为该图片的完整 url。
代码示例
// 给定后端返回的 HTTP 响应头："Image-Width: 1000px; Image-Height: 500px"
// 后端获取图像原始尺寸并返回 HTTP 响应头
function getImgDimensions(imgElement) {
// 假设 imgElement 的 src 属性为 "img.jpg"
var url = imgElement.src;
var xhr = new XMLHttpRequest();
xhr.open("HEAD", url, true);
xhr.onload = function() {
if (xhr.status == 200) {
var width = xhr.getResponseHeader("Image-Width");
var height = xhr.getResponseHeader("Image-Height");
calculateActualSize(imgElement, width, height);
}
};
xhr.send();
}
// 根据原始尺寸计算实际显示尺寸
function calculateActualSize(imgElement, width, height) {
var parentWidth = imgElement.parentElement.clientWidth;
var parentHeight = imgElement.parentElement.clientHeight;
// 计算比例
var scale = Math.min(parentWidth / width, parentHeight / height);
// 设置实际显示尺寸
imgElement.width = width * scale;
imgElement.height = height * scale;
// 设置 data-src 属性
imgElement.dataset.src = imgElement.src;
}
// 页面加载时遍历所有 img 元素
window.addEventListener("load", function() {
var imgElements = document.querySelectorAll("img");
for (var i = 0; i < imgElements.length; i++) {
getImgDimensions(imgElements[i]);
}
});通过这种方式，你可以动态地为所有图像添加 data-src 属性，而无需修改 html 代码。
