最近研究了京东商城用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"
});
分享到:
相关推荐
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效...
介绍了,JS图片根据鼠标滚动延时加载的实例代码,有需要的朋友可以参考一下
jQuery鼠标滚动页面图片延迟加载代码
鼠标滚动,图片,延迟加载鼠标滚动,图片,延迟加载 下载。整理
相信大家在selenium爬取网页的时候都遇到过这样的问题:就是网页内容需要用鼠标滚动加载剩余内容,而不是一次全部加载出网页的全部内容,这个时候如果要模拟翻页的时候就必须加载出全部的内容,不然定位元素会找不到...
SimpleMall仿Tmall的一个简单商城DEMO演示地址:使用了jquery库轮播使用了插件辅助工具node.js、webpack 、git实现了ajax远程获取数据,加载页面信息根据鼠标滚动延迟加载商品信息,以提高打开页面的速度注册和登陆...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较。但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导致图片位置...
React图库转盘无依赖的React轮播组件,支持延迟加载,捏缩放,触摸滑动,鼠标拖动,速度检测,最大化,缩略图,键盘导航和可访问性。演示版现场演示尝试光标控制的轮播旋转木马由手指控制非最大化轮播轮播最大化灯塔...
7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出图片,淡入另一幅图片 7.23 页面加载时随机显示图片 7.24 按顺序淡入图片显示 7.25 检测图片的URL是否有效 7.26 强制显示图片的方法 7.27 ...
它可以触发自定义回调,从而在您滚动时操纵页面,例如延迟加载媒体。 它可以在实例化时使用数据数组将标记动态插入页面中,也可以使用预先存在的标记。 此外,它维护与所有这些自定义交互相关的数据。例子在控制...
添加了reverseZoom选项以更改鼠标滚轮方向解决了更改窗口大小时放大镜位置固定的问题修复了加载延迟环境中无法容纳图像的问题版本20171120 发布版本发行主功能图像缩略图滑块自定义每帧图像大小图像的部分放大输出...
:check_mark_button: 性能滚动所需的行数 :check_mark_button: 可调整大小的列 :check_mark_button: 通过鼠标和键盘控制 :check_mark_button: 灵活设置残疾细胞 :check_mark_button: 延迟加载支持 :check_mark_...
具有自定义功能的延迟加载子项 处理多达一百万个折叠节点和5,000个扩展节点 平移(拖放) 放大缩小(使用鼠标滚轮/滚动) 懒惰的父母(在树上上去) 放大,缩小和缩放按钮。 以图片或PDF格式下载orgchart 我们...
-加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)。 -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例,使用验证图片(feedback:kedee)...
-加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)。 -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例,使用验证图片(feedback:kedee)...