JS图片根据鼠标滚动延时加载的实例代码
更新时间：2013年07月13日 14:05:02 作者：
这篇文章介绍了，JS图片根据鼠标滚动延时加载的实例代码，有需要的朋友可以参考一下
最近研究了京东商城用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"
});
就是默认地址赋给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"
});
相关文章
下面小编就为大家带来一篇javascript实现下雪效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
echarts中X轴显示特定个数label并修改样式的方法详解
最近在使用Echarts图表遇到些特别的需求,想着给大家整理下,所以下面这篇文章主要给大家介绍了关于echarts中X轴显示特定个数label并修改样式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了JavaScript常用脚本汇总系列的第一篇，给大家分享的是jquery限制文本框只能输入数字、封装DOMContentLoaded事件、用原生JS对AJAX做简单封装、跨域请求之JSONP、千分位格式化，有需要的小伙伴们参考下吧。2015-03-03
这篇文章主要介绍了JavaScript乘法口诀表的简单实现，文中给出了详细的示例代码，这样对大家的理解和学习更有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
这篇文章主要介绍了BootStrap模态框闪退问题实例代码详解,需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了JavaScript简单实现弹出拖拽窗口的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
三维开发渲染最多的对象大概是网格mesh了，Webgl开发三维也不例外，下面这篇文章主要给大家介绍了关于Three.js中网格对象MESH的属性与方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
Javascript验证Visa和MasterCard信用卡号的方法
这篇文章主要介绍了Javascript验证Visa和MasterCard信用卡号的方法,涉及javascript正则验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本文主要介绍了js中隐藏/显示密码的Zepto的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
JavaScript中出现了一个以前没学过的概念——闭包。何为闭包？从表面理解即封闭的包，与作用域有关。所以，说闭包以前先说说作用域2012-06-06
最新评论