图片懒加载懒人不懒
给图片添加 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 代码。
以上就是如何使用后端配合前端实现图片懒加载，避免遍历页面获取所有 img 元素？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2660265.html
