图片懒加载
图片懒加载
发布时间：2026-01-18 01:03:12
请在 下方输入 要搜索的题目：
推荐参考答案 (
由 题搜搜 官方老师解答 )
答案：图片懒加载理解：由于商城图片过多时，就会给图片加一个懒加载的缓冲效果。当图片进入可视化区域的时候才会加载，否则图片只是一个空标签。这样可以优化页面渲染速度，提升用户体验。思路：将页面中的所有img属性src用data-src代替，当页面滚动至此图片出现在可视区域时，用js取到该图片的data-src值赋给src。所用知识点：浏览器可视区域的宽高：Js : document.body.clientWidth/clientHeightJquery: var windHeight = $(window).width()/$(window).height();获取滚动条相对于顶部的高度:Js : document.body.scrollTop;Jquery : var scrollTop=$(window).scrollTop;获得元素对于浏览器顶部的高度:Js : DOM元素.offsetTop;Jquery: var imgTop=$('img').offset().top判断元素是否出现在浏览器的可视化区域内:元素相对于顶部的高度 - 浏览器可视化区域的高度 < 小于滚动条到顶部的高度 成立就代表出现 : 不成立就没出现怎样排除首屏的图片元素到顶部距离 - 浏览器的可视化高度 > 0排除已加载的图片$(this).attr(‘src’) != $(this).attr(‘data-src’) //排除已加载的图片Jquery实现图片懒加载 :<script> // 注意: 需要引入jQuery和underscore $(function() { // 获取window的引用: var $window = $(window); // 获取包含data-src属性的img，并以jQuery对象存入数组: var lazyImgs = _.map($('imgdata-src]').get(), function (i) { return $(i); }); // 定义事件函数: var onScroll = function() { // 获取页面滚动的高度: var wtop = $window.scrollTop(); // 判断是否还有未加载的img: if (lazyImgs.length > 0) { // 获取可视区域高度: var wheight = $window.height(); // 存放待删除的索引: var loadedIndex = ]; // 循环处理数组的每个img元素: _.each(lazyImgs, function ($i, index) { // 判断是否在可视范围内: if ($i.offset().top - wtop < wheight) { // 设置src属性: $i.attr('src', $i.attr('data-src')); // 添加到待删除数组: loadedIndex.unshift(index); } }); // 删除已处理的对象: _.each(loadedIndex, function (index) { lazyImgs.splice(index, 1); }); } }; // 绑定事件: $window.scroll(onScroll); // 手动触发一次: onScroll(); </script>OnScroll()函数最后要手动触发一次，因为页面显示时，并未触发scroll事件。如果图片已经在可视化区域内，这些图片仍然是loading状态，需要手动触发一次，就可以正常显示。
