经常看到京东,团购有图片延迟加载的使用,于是自己捉摸着实现了一个,仅供参考。
js代码部分:
/**
*图片延迟加载
*@param yourfun 处理图片的方法
*@param divID scroll绑定的容器的ID(默认是当期事件触发的控件,然后是document)
*
**/
function lazyload(yourfun,divID,offsetParentId){
//构造全局变量:lazyImgs,格式为{arr:null,len:null};
if(typeof(lazyImgs)=="undefined"){
lazyImgs = {arr:null,len:null};
lazyImgs.arr = document.getElementsByTagName("IMG"); //获取页面所有图片
lazyImgs.len = lazyImgs.arr.length;
}
//顺序:指定ID的控件,然后是 当前事件触发的控件(先IE后Firefox),最后是 document
var dom =document.getElementById(divID+"")||(window.event||{}).srcElement||getFFEvent().target||document.documentElement;
var nOffsetHeight = dom.offsetHeight+dom.scrollTop;
var img;
var offsetParent = null;
var IEversion = 0;
if(document.all){
IEversion = parseInt((navigator.userAgent.split("MSIE")[1]).split(";")[0].replace(/ /,''));
}
var nTop = 0;
for(var i=0;i<lazyImgs.len;i++){
img = lazyImgs.arr[i];
nTop = img.offsetTop;
if(IEversion==7||IEversion==6){//IE67特殊处理。
nTop = getIE7ImgOffset(img).offsetTop;
//nTop = img.offsetParent.offsetParent.offsetParent.offsetTop;
}
//TODO +100是为了看到延迟效果,改成+0则会立即显示
if(nTop+100 < nOffsetHeight){
yourfun(img);
}
}
}
/* 获取FF下当前事件对象 */
function getFFEvent(){
var func = EasyTip.getFFEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
// top.JSLogger.log(arg0);
return arg0;
}
}
func = func.caller;
}
return func;
}
/*
*目的:IE7和IE6下,如果图片的容器(多半是DIV)的float等于left或者right,那么
* 自身的offsetTop等于相对于其父容器的高度,不是相对于body的高度,IE7、6如下处理。
*用户获取包裹img标签在IE7和IE6下的offset对象
*@param dom 一个dom对象(传递img对象或者其他dom对象)
*@return 从里向外找,返回第一个float为空的dom的父窗体。
***/
function getIE7ImgOffset(dom){
var sFloat = dom.offsetParent.style["float"]||"";
var bNext = ("left"==sFloat.toLowerCase() || "right"==sFloat.toLowerCase());
while(bNext && (dom = dom.offsetParent)){
sFloat = dom.style["float"]||"";
bNext = ("left"==sFloat.toLowerCase() || "right"==sFloat.toLowerCase());
}
return dom;
}
//延迟图片的处理方法:重新加载并显示图片的src
function resetImg(img){
if(!!img.getAttribute("file")){
img.setAttribute("src",img.getAttribute("file"));
img.removeAttribute("file");
}
}
function onload(){
//使用图片LazyLoud
document.getElementById("content").style.height="500px";
document.getElementById("content").onscroll= function(){
lazyload(resetImg,"content","1366content");
};
}
附件是演示源码
愤怒的coder - 不断进取
- 大小: 383.7 KB
分享到:
相关推荐
网页图片处理JS插件1.0 简单介绍:插件可以让用户用户可以在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播。(支持:放大缩小、加文字、透明、闪图、叠图、加对话框等等,特别支持GIF动画。...
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
你可以随心所欲地控制你页面的任何部分的内容被复制。---- javascrpt
NULL 博文链接:https://wintys.iteye.com/blog/426091
兼容ie,FF,chrome,opera的弹出层居中js。
jsencrypt 兼容IE8,Chrome,FF,包括exports.default,Object.defineProperty不兼容问题处理等。
css下拉菜单示例,兼容ie678,ff,chrome
这些代码能够实现图片上传前预览,找了好几个才找到一个能用的。
个人做的一个上传图片的一个iframe 将本文件夹内容上传到服务器中,运行demo/index.html即可。 本源码属于个人开发开放式源码,可随意传播。 支持IE/FF/Chrome浏览器
/* * * 脚本名称:网络拓扑图 * * 脚本版本:v1.0 * ... * * 版权说明: * * 脚本版权归作者所有,仅供学习使用,如果用于商业用途请与作者联系(使用免费,但请告知), * 修改后版本请保留出处, 并把...
兼容IE FF 省级三级联动 兼容IE FF 省级三级联动 兼容IE FF 省级三级联动 兼容IE FF 省级三级联动
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
NULL 博文链接:https://zfsn.iteye.com/blog/859747
CSS完美兼容IE6IE7FF的通用方法
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
js新闻上下滚动效果(兼容IE和ff)。
1、基于raphael2.0的绘图(内含大量...2、几乎兼容所有浏览器包括ie, firefox,chrome,opera, Safari 3、内含说明文档和演示代码,详见demo文件夹 4、可动态拖动图形(贝磁曲线、动态拾色器、图表、地图导航、流程图等)。
之前做推拉门式菜单时在网上找的都不兼容ff,这是小弟自己改动了点,兼容ff和IE,希望给大家方便。不足之处请多多指点
JS图片预览(兼容IE6、IE7、IE8和FF)