`

JS延迟加载图片

阅读更多
图片延迟加载的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
};
分享到:
评论

相关推荐

    Echojs延迟加载图片JavaScript微型库

    **Echo.js:一款高效实用的JavaScript延迟加载图片库** 在网页设计中,图片是不可或缺的元素,它们可以增强用户体验,但同时也可能导致页面加载速度变慢。为了优化网站性能,延迟加载(Lazy Loading)技术应运而生...

    jquery图片延迟加载

    3. **动画效果**:加载图片时,可以添加过渡效果,比如淡入、渐显,提升用户体验。 4. **图片懒加载插件选择**:除了`lazyload`,还有其他如`lozad.js`、`lazysizes`等优秀插件,可以根据项目需求选择合适的。 5. ...

    js延迟加载图片实例代码

    JavaScript延迟加载图片是一种优化网页性能的技术,特别是在网页包含大量图片时。这种技术允许网页只在用户滚动到可视区域时才加载图片,而不是一次性全部加载,从而减少了页面初始加载时间,提高了用户体验,特别是...

    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延迟加载图片的插件

    今天共享一个DIY的利用JS来延迟加载图片的插件。 大概的实现方式是:页面的定义元素img时,将src统一替换成自定义的一个属性名,如叫“originalSrc”,然后利用JS把给img的src设置为一个定义好的等待图片,然后在...

    js页面图片延迟加载特效.zip

    在网页设计中,提高用户体验和...总结来说,"js页面图片延迟加载特效"是一种高效优化网页加载速度的技术,通过JavaScript实现,能显著提升用户体验。通过理解和应用这些知识点,开发者可以创建更流畅、响应更快的网页。

    延迟加载js代码下载(包括页面延迟加载以及图片延迟加载)

    本篇文章将详细讲解延迟加载在JavaScript(js)和jQuery中的应用,以及如何实现页面和图片的延迟加载。 一、延迟加载的概念 延迟加载,也称为懒加载(Lazy Loading),是指在需要时才加载资源的技术。这种技术主要...

    HTML延迟加载图片 html图片延迟加载技术大全.zip

    HTML延迟加载图片,也称为懒加载(Lazy Load),是一种优化网页性能的技术,它允许网页只在需要时才加载图片,而不是一次性加载所有内容。这种技术对于拥有大量图片的页面尤其有益,因为它可以显著减少页面的初始...

    js图片延迟加载 一个很好的例子

    以下是一个简单的JavaScript延迟加载图片的示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JavaScript图片延迟加载示例 .lazy { width: 100%; height: auto; opacity: 0; /* 预加载过渡效果 */ transition: ...

    图片延迟加载的jq

    jQuery.lazyload的工作原理是监听滚动事件,当用户滚动页面,即将或已经看到图片时,才开始加载图片。这样可以避免一次性加载所有图片导致的页面加载时间过长的问题,尤其是对于含有大量图片的页面,效果尤为显著。 ...

    JS异步加载图片

    JS异步加载图片的核心思想是将图片的加载延迟到需要时,或者当用户滚动到图片即将可见的位置时。这通常通过监听滚动事件、计算图片距离视口的距离来实现。 ### 实现方式 1. **DOMContentLoaded事件**:当HTML文档...

    原生js延迟加载

    在JavaScript的世界里,延迟加载(Lazy Loading)是一种优化网页性能的技术,它允许我们仅在真正需要时才加载资源,如图片、脚本或视频。这种技术可以显著减少初始页面加载时间,提高用户体验,并减少服务器压力。...

    图片延时加载实例

    - `lazyload.js`或`lazyload.min.js`: `lazyload`框架的JavaScript文件,用于处理图片的延迟加载逻辑。 - `styles.css`或`styles.min.css`: 可能包含了框架的样式,例如加载动画的CSS。 - `images/`: 文件夹,包含...

    JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。

    JavaScript延迟加载技术是一种优化网页性能的重要策略,它允许我们按需加载资源,而不是一次性加载所有内容,从而减少了页面初始化时的负担,提升了用户体验。在这个示例中,我们将探讨如何使用JavaScript来封装延迟...

    jquery 图片延迟加载

    2. **初始化插件**:使用jQuery选择器找到所有的延迟加载图片,并绑定滚动事件。 3. **滚动检测**:当用户滚动页面时,检查图片是否已进入可视区域。 4. **加载图片**:如果图片在可视区域内,将`data-src`属性的值...

    js设置延迟加载

    ### js设置延迟加载 在现代Web开发中,为了提高用户体验并优化资源管理,开发者们常常会用到“延迟加载”(Lazy Loading)技术。本文将详细介绍如何使用JavaScript实现页面元素或功能的延迟加载,帮助读者更好地...

    magento图片延时加载插件

    图片延时加载(也称为懒加载)是一种优化网页性能的技术,它只在用户滚动到图像所在的视口区域时才开始加载图片,而不是一次性加载所有图片。这种策略可以显著减少页面的初始加载时间,提高用户体验,特别是对于拥有...

    jquery延迟加载图片

    **jQuery延迟加载图片技术详解** 在网页设计中,图片往往是页面加载速度的瓶颈。为了提高网页的加载效率和用户体验,开发者通常会采用延迟加载(Lazy Loading)技术,尤其是在图片众多的场景下。jQuery库提供了简单...

    js延时图片加载

    提供的文件`o_loading.gif`可能是用于延迟加载时的占位符图片,而`js延时加载.html`是一个实际的示例页面,其中包含了上述延迟加载的JavaScript代码。在这个页面中,可以看到如何将`Intersection Observer`或`scroll...

    图片懒加载(延迟加载)

    懒加载图片"&gt; ``` 2. **JavaScript处理**:引入一个外部JavaScript文件(如`js/lazyload.js`),在这个文件中编写懒加载的逻辑。首先,获取所有具有`lazyload`类名的图片元素,然后在滚动事件中检查这些图片是否...

Global site tag (gtag.js) - Google Analytics