图片延迟加载的JS代码。将页面的img标签中的src写成src2即可使用。
例如:
<img alt="lazy image" title="lazy image" src2="http://www.abc.com/lazeimage.jpg">
JS源代码如下(需要用到jquery):
function getPosition(h) {
var a = navigator.userAgent.toLowerCase();
var b = (a.indexOf("opera") != -1);
var e = (a.indexOf("msie") != -1 && !b);
var d = h;
if (d.parentNode === null || d.style.display == "none") {
return false
}
var l = null;
var k = [ ];
var i;
if (d.getBoundingClientRect) {
i = d.getBoundingClientRect();
if (a.indexOf("ipad") != -1) {
return {
x: i.left,
y: i.top
}
}
var c = jQuery(window).scrollTop();
var f = jQuery(window).scrollLeft();
return {
x: i.left + f,
y: i.top + c
}
} else {
if (document.getBoxObjectFor) {
i = document.getBoxObjectFor(d);
var j = (d.style.borderLeftWidth) ? parseInt(d.style.borderLeftWidth) : 0;
var g = (d.style.borderTopWidth) ? parseInt(d.style.borderTopWidth) : 0;
k = [i.x - j, i.y - g]
} else {
k = [d.offsetLeft, d.offsetTop];
l = d.offsetParent;
if (l != d) {
while (l) {
k[0] += l.offsetLeft;
k[1] += l.offsetTop;
l = l.offsetParent
}
}
if (a.indexOf("opera") != -1 || (a.indexOf("safari") != -1 && d.style.position == "absolute")) {
k[0] -= document.body.offsetLeft;
k[1] -= document.body.offsetTop
}
}
}
if (d.parentNode) {
l = d.parentNode
} else {
l = null
}
while (l && l.tagName != "BODY" && l.tagName != "HTML") {
k[0] -= l.scrollLeft;
k[1] -= l.scrollTop;
if (l.parentNode) {
l = l.parentNode
} else {
l = null
}
}
return {
x: k[0],
y: k[1]
}
}
jQuery(document).ready(function lazyload() {
var d = jQuery("img[src2]");
var a = function() {
return jQuery(window).height() + jQuery(window).scrollTop()
};
imgLoad(d, a());
var c = 150;
var b = 0;
jQuery(window).bind("scroll",
function() {
var e = Math.abs(jQuery(window).scrollTop() - b);
if (e >= c) {
imgLoad(d, a());
if (imgLoadStatus == 1) {
b += c;
imgLoadStatus = 0
}
}
})
});
var imgLoadStatus = 0;
function imgLoad(b, a) {
b = jQuery("img[src2]");
b.each(function() {
var d = jQuery(this).attr("src2");
if (d) {
var c = getPosition(jQuery(this)[0]).y;
if (c <= a && (c + jQuery(this).height()) >= jQuery(window).scrollTop()) {
jQuery(this).attr("src", d).removeAttr("src2")
}
}
});
imgLoadStatus = 1
};
分享到:
相关推荐
利用 data-* 属性延迟加载图片的JavaScript微型库
这个图片延迟加载效果是在Lazyload的基础上扩展的,主要扩展了获取img元素,获取src和图片加载的部分。 兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0 其中safari和chrome部分功能不支持。
今天共享一个DIY的利用JS来延迟加载图片的插件。 大概的实现方式是:页面的定义元素img时,将src统一替换成自定义的一个属性名,如叫“originalSrc”,然后利用JS把给img的src设置为一个定义好的等待图片,然后在...
js页面图片延迟加载特效是一款仿淘宝商城商品页面图片延迟加载效果,滚动条滚动到图片时再执行加载,添加了一个渐现效果 js页面图片延迟加载特效图:
延迟加载
JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。
js设置延迟加载、
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js
原生js面向对象写的延迟加载效果,自动播放轮播图,无缝滚动三个效果页面。
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
js图片延迟加载 只需调用JS轻轻松松实现图片延迟加载
js延时图片加载
自己写的图片延迟加载.在IE6、7、8和火狐下测试过。单机tomcat6环境下压力测试通过。 使用说明: 1 引入js文件。 2 在需要做图片延迟加载的页面把img 的src属性换成 hsrc 3 在页面加载前执行 hiddenImge(myImages, ...
jquery实现真正的延迟加载图片,调用方法也非常简单 $img").lazyload({ placeholder : "/js/fill.gif", effect : "fadeIn" });
JavaScript实现图片懒加载。图片懒加载是一种在页面加载时,延迟加载图片资源的技术,也就是说图片资源在需要的时候才会加载。
类似校内网,微博 js延时加载,滚动条,随滚动条逐渐显示信息
很多人用ecshop或者shopex来做商城的时候,首页的图片太多导致首页在加载的时候特别的慢,这里呢给大家介绍个商城图片延时加载效果的方法,该方法是使用jS脚本控制真实图片加载的时间。原理技术当你网站打开显示屏幕...
JS实现图片延迟加载(缓冲),非常实用.注意:页面上如果有滑动门等元素,可能显示不全。因情况需要调一下。总体来说不错!
延迟打开图片,延时加载,js延时加载代码