最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给img标签的src2属性,显示时赋给src属性值。
function lazyload(option) {
var settings = {
defObj: null,
defHeight: 0
};
settings = $.extend(settings, option || {});
var defHeight = settings.defHeight;
var defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img");
var pageTop = function() {
return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - settings.defHeight;
};
var imgLoad = function() {
defObj.each(function() {
if ($(this).offset().top <= pageTop()) {
var src2 = $(this).attr("src2");
//已显示的不用再显示
if (src2) {
//显示后,去掉src2属性
$(this).attr("src", src2).removeAttr("src2");
}
}
});
};
imgLoad();
$(window).bind("scroll", function() {
imgLoad();
});
}
lazyload({
defObj:".w1"
});
分享到:
相关推荐
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效...
2. **src2 属性**:在上述实例代码中,由于需要延迟加载图片,所以除了常规的src属性外,引入了一个自定义的src2属性。src2属性用于临时存储图片的真实地址。 3. **页面滚动事件**:页面滚动时,会触发window的...
延迟加载图片"> ``` 在这里,`data-src`属性存储了真实图片的URL,`class="lazy"`标记了需要延迟加载的图片。 3. **编写JavaScript**:创建一个jQuery函数,监听滚动事件,并判断图片是否在视口内。如果在,...
7. **图片加载优化**:为了提高页面加载速度,可以考虑使用延迟加载(lazy loading)技术,只有当图片进入视口时才开始加载,这样可以减少初次加载时的网络负担。 8. **兼容性测试**:在实现特效后,应进行跨浏览器...
2. **延迟加载**:为了避免频繁地触发加载事件,可以设置一个阈值,只有当用户滚动距离超过这个阈值时才开始加载。 3. **状态管理**:React组件需要管理当前加载的数据和状态,如是否正在加载新数据、已加载的数据...
图片延迟加载,也被称为懒加载(Lazy Loading),是一种优化网页性能的技术。在网页设计中,尤其是在内容丰富的网站或社交媒体平台上,大量的图片会显著增加页面的加载时间,这可能导致用户流失。为了解决这个问题,...
《jQuery鼠标滚动图片:打造动态视觉盛宴》 在网页设计中,吸引用户的注意力并提供良好的交互体验至关重要。jQuery鼠标滚动图片技术就是一种实现这一目标的有效手段。它将传统的静态图片展示转变为动态的、响应用户...
同时,通过监听鼠标滚轮事件,实现滚动加载,使数据加载更加平滑自然。而"WebCombo"这样的工具则为开发者提供了实现这些功能的便利。在实际开发中,理解和掌握这些技术,可以显著提升网站的性能和用户满意度。
6. **延迟加载**:对非首屏图片,设置一个合适的延迟时间,等待用户停顿后再加载,减少不必要的网络请求。 7. **优先级加载**:根据图片的重要性或与用户的交互程度,设定不同的加载优先级。例如,用户鼠标悬停的...
10. **性能优化**:对于大量图片的查看,可能需要考虑内存管理和加载策略,如延迟加载(Lazy Loading)、预加载(Preloading)等,以提高程序性能并减少内存占用。 综上所述,创建一个支持鼠标滚动缩放和拖拽的WPF...
标题“鼠标滚动至底部展示内容”涉及到的是网页交互设计中的一种常见功能,即无限滚动或称为滚动加载。这种设计允许用户在浏览页面时,当滚动到页面底部时自动加载更多内容,无需点击“加载更多”按钮。这在数据量大...
"图片根据鼠标滑动特效.zip" 提供的是一种解决方案,它利用JavaScript(JS)实现了一个图片滚动展示的特效,使得长图能够在用户鼠标滑动时动态加载,既节省了页面空间,又保证了图片的完整呈现。这种技术被称为...
原生JavaScript页面滚动延迟加载图片的实现原理和过程是现代Web开发中常用的一种技术,目的是提升页面加载性能和用户体验。该技术涉及页面滚动事件的监听、元素位置的计算、图片资源的异步加载等方面。下面详细解释...
jQuery Lazyload插件通过监听滚动事件,判断图片是否进入视口,如果进入则加载图片,通常还会结合CSS进行优化,比如初始时设置图片为透明或占位符,加载完成后再显示真实图片。 在实际应用中,使用jQuery Lazyload...
- 延迟加载:设置一个阈值,当接近底部时才开始加载更多数据,避免频繁请求。 - 数据预加载:在用户滚动之前预测并加载即将进入可视区域的数据。 8. **错误处理与用户体验**: 在处理滚动加载时,应考虑网络延迟...
在使用Selenium进行网页自动化测试或网页数据抓取时,经常会遇到一种情况,即网页内容不是一次性全部加载,而是需要用户滚动页面时才逐步显示。这种情况通常被称为“懒加载”或者“无限滚动”。本文将详细讲解如何...
在实际应用中,还可以根据需求进一步优化,比如添加图片加载进度提示、错误处理机制、图片懒加载库(如lozad.js或lazysizes)等。理解并掌握这种技术,对于提升网页性能和用户体验具有重要意义。