图片延迟加载的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
};
分享到:
相关推荐
**Echo.js:一款高效实用的JavaScript延迟加载图片库** 在网页设计中,图片是不可或缺的元素,它们可以增强用户体验,但同时也可能导致页面加载速度变慢。为了优化网站性能,延迟加载(Lazy Loading)技术应运而生...
3. **动画效果**:加载图片时,可以添加过渡效果,比如淡入、渐显,提升用户体验。 4. **图片懒加载插件选择**:除了`lazyload`,还有其他如`lozad.js`、`lazysizes`等优秀插件,可以根据项目需求选择合适的。 5. ...
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页面图片延迟加载特效"是一种高效优化网页加载速度的技术,通过JavaScript实现,能显著提升用户体验。通过理解和应用这些知识点,开发者可以创建更流畅、响应更快的网页。
本篇文章将详细讲解延迟加载在JavaScript(js)和jQuery中的应用,以及如何实现页面和图片的延迟加载。 一、延迟加载的概念 延迟加载,也称为懒加载(Lazy Loading),是指在需要时才加载资源的技术。这种技术主要...
HTML延迟加载图片,也称为懒加载(Lazy Load),是一种优化网页性能的技术,它允许网页只在需要时才加载图片,而不是一次性加载所有内容。这种技术对于拥有大量图片的页面尤其有益,因为它可以显著减少页面的初始...
以下是一个简单的JavaScript延迟加载图片的示例: ```html <!DOCTYPE html> <title>JavaScript图片延迟加载示例 .lazy { width: 100%; height: auto; opacity: 0; /* 预加载过渡效果 */ transition: ...
jQuery.lazyload的工作原理是监听滚动事件,当用户滚动页面,即将或已经看到图片时,才开始加载图片。这样可以避免一次性加载所有图片导致的页面加载时间过长的问题,尤其是对于含有大量图片的页面,效果尤为显著。 ...
JS异步加载图片的核心思想是将图片的加载延迟到需要时,或者当用户滚动到图片即将可见的位置时。这通常通过监听滚动事件、计算图片距离视口的距离来实现。 ### 实现方式 1. **DOMContentLoaded事件**:当HTML文档...
在JavaScript的世界里,延迟加载(Lazy Loading)是一种优化网页性能的技术,它允许我们仅在真正需要时才加载资源,如图片、脚本或视频。这种技术可以显著减少初始页面加载时间,提高用户体验,并减少服务器压力。...
- `lazyload.js`或`lazyload.min.js`: `lazyload`框架的JavaScript文件,用于处理图片的延迟加载逻辑。 - `styles.css`或`styles.min.css`: 可能包含了框架的样式,例如加载动画的CSS。 - `images/`: 文件夹,包含...
JavaScript延迟加载技术是一种优化网页性能的重要策略,它允许我们按需加载资源,而不是一次性加载所有内容,从而减少了页面初始化时的负担,提升了用户体验。在这个示例中,我们将探讨如何使用JavaScript来封装延迟...
2. **初始化插件**:使用jQuery选择器找到所有的延迟加载图片,并绑定滚动事件。 3. **滚动检测**:当用户滚动页面时,检查图片是否已进入可视区域。 4. **加载图片**:如果图片在可视区域内,将`data-src`属性的值...
### js设置延迟加载 在现代Web开发中,为了提高用户体验并优化资源管理,开发者们常常会用到“延迟加载”(Lazy Loading)技术。本文将详细介绍如何使用JavaScript实现页面元素或功能的延迟加载,帮助读者更好地...
图片延时加载(也称为懒加载)是一种优化网页性能的技术,它只在用户滚动到图像所在的视口区域时才开始加载图片,而不是一次性加载所有图片。这种策略可以显著减少页面的初始加载时间,提高用户体验,特别是对于拥有...
**jQuery延迟加载图片技术详解** 在网页设计中,图片往往是页面加载速度的瓶颈。为了提高网页的加载效率和用户体验,开发者通常会采用延迟加载(Lazy Loading)技术,尤其是在图片众多的场景下。jQuery库提供了简单...
提供的文件`o_loading.gif`可能是用于延迟加载时的占位符图片,而`js延时加载.html`是一个实际的示例页面,其中包含了上述延迟加载的JavaScript代码。在这个页面中,可以看到如何将`Intersection Observer`或`scroll...
懒加载图片"> ``` 2. **JavaScript处理**:引入一个外部JavaScript文件(如`js/lazyload.js`),在这个文件中编写懒加载的逻辑。首先,获取所有具有`lazyload`类名的图片元素,然后在滚动事件中检查这些图片是否...