`
huangyongxing310
  • 浏览: 494489 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

lazyLoad

 
阅读更多
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="myController">
    <div style="height: 500px" ng-repeat="x in menuListData" class="menuDiv">
        <img style="height: 100%" class="menuImg" src="fill.jpg" dataSrc="{{x}}">
    </div>
</div>

</body>

<script>
    var app = angular.module('myApp', []);
    //定义服务
    app.service('commonFun', function ($http) {
        this.elementLazyload = function (positionSelector, targetSelector,targetAttributeName, srcAttributeName,srcUrl) {
            var elements = $(positionSelector);
            var targetElements = $(targetSelector);
            console.info("targetElements.length == " + targetElements.length);

            var num = elements.length;
            console.info("num == " + num);
            var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历

            function lazyloadDeal() {
                var windowHeigh = $(window).height();
                var scrollTopHeigh = $(document).scrollTop();
                console.info("windowHeigh == " + windowHeigh);
                console.info("scrollTopHeigh == " + scrollTopHeigh);

                for (var i = n; i < num; i++) {
                    //console.info("elementsoffsetTop == " + elements[i].offsetTop + " i== " + i);
                    //console.info("windowHeigh + scrollTopHeigh == " + (windowHeigh + scrollTopHeigh));
                    //if (elements[i].offsetTop < windowHeigh + scrollTopHeigh) {
                    if (elements[i].offsetTop < windowHeigh + scrollTopHeigh) {
                        if (targetElements[i].getAttribute(targetAttributeName) == srcUrl) {
                            //console.info("windowHeigh ============================================== i == " + i);
                            targetElements[i].setAttribute(targetAttributeName, targetElements[i].getAttribute(srcAttributeName))
                        }
                        n = i + 1;
                    }
                }
                if (n == num) {
                    console.info("n == num");
                    $(window).unbind("scroll",lazyloadDeal);
                }
            }

            $(window).scroll(lazyloadDeal);
            lazyloadDeal();
        };
    });

    app.controller('myController', function ($scope, commonFun, $timeout) {
        $scope.menuListData = ["ajax1.jpg","ajax2.jpg","ajax3.jpg","ajax4.jpg","ajax5.jpg","ajax6.jpg","ajax7.jpg"];

        var timer = $timeout(function () {
            commonFun.elementLazyload(".menuDiv",".menuDiv img","src","dataSrc","fill.jpg");
        }, 2000);   //该函数延迟2秒执行


    });
</script>
</html>
分享到:
评论

相关推荐

    lazyload-2.x.zip

    《jQuery LazyLoad 2.x API详解与应用实践》 在当今网页开发中,为了提高页面加载速度和用户体验,"懒加载"(Lazy Load)技术变得越来越重要。jQuery LazyLoad插件是一个广泛使用的解决方案,它允许图片、iframe等...

    jquery.lazyload.js

    《jQuery.Lazyload.js:优化网页加载速度与用户体验的艺术》 在现代网页设计中,页面加载速度和用户体验是至关重要的因素。jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时...

    JQuery Lazyload加载图片实例

    **jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...

    jQuery_lazyload

    jQuery_lazyload是一个非常实用的JavaScript库,用于优化网页性能,特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载,即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容,从而减少初次...

    JQuery LazyLoad 图片懒加载实例

    **jQuery LazyLoad 图片懒加载实例** 在网页设计中,图片加载是影响页面性能的关键因素。当页面包含大量图片时,一次性加载所有图片可能会导致页面加载速度变慢,用户体验下降。为了解决这一问题,我们可以使用`...

    lazyload.js演示页面

    标题中的“lazyload.js演示页面”表明这是一个关于延迟加载技术的示例,主要使用了名为“lazyload.js”的JavaScript库。延迟加载,或称为懒加载,是一种优化网页性能的策略,它只在用户滚动到视口附近的图片或内容时...

    懒加载lazyload

    `jquery.lazyload.js` 是基于 jQuery 的懒加载插件,而 `jquery-1.11.0.min.js` 是 jQuery 的一个小巧且经过压缩的版本,用于支持 `jquery.lazyload.js` 的运行。`tuupola-jquery_lazyload` 这个压缩包可能包含了这...

    图片延迟加载 lazyload

    然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...

    jquery lazyload延时加载

    **jQuery LazyLoad 知识详解** 在网页设计与开发中,优化用户体验和页面加载速度是一项至关重要的任务。jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而...

    lazyload使用案例及DEMO

    **图片懒加载技术详解与"lazyload"使用案例** 在现代网页设计中,为了提高页面加载速度和用户体验,"图片懒加载"(Lazy Loading)技术得到了广泛应用。它是一种优化策略,仅在用户滚动到图像所在区域时才加载图片,...

    动态加载的图片LazyLoad

    在Web开发中,JQuery.LazyLoad是一款非常流行的实现动态加载的插件。它基于JavaScript库jQuery,允许开发者轻松地将延迟加载功能添加到图片或其他HTML元素上。JQuery.LazyLoad的工作原理是监控页面滚动事件,当元素...

    magento lazyload插件

    Magento LazyLoad 插件是针对Magento电子商务平台设计的一款性能优化工具。它的主要功能是实现图片的延迟加载(Lazy Load),以此提升网站的加载速度和用户体验。在网页浏览时,传统方式下所有图片会一次性全部加载...

    jQuery.lazyload-1.7.2

    jQuery.lazyload 是一个非常流行的JavaScript插件,专用于优化网页性能,通过实现图片的懒加载技术。这个插件的核心理念是延迟非视口内的图片加载,直到用户滚动页面并接近这些图片时才进行加载。这样可以显著减少...

    jQuery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    lazyload.js实现图片异步延迟加载

    在本文中,我们将深入探讨如何使用`lazyload.js`这个JavaScript库来实现这一功能。 ### 1. 懒加载原理 懒加载的基本原理是,当用户滚动页面时,只加载视口内的图片,而那些位于视口之外的图片则暂时不加载。当用户...

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...

    图片延迟加载,lazyload.js使用实例

    3. **初始化`lazyload.js`**:在页面加载完成后,调用`lazyload.js`的初始化函数。 ```javascript document.addEventListener('DOMContentLoaded', function() { var lazyImages = new LazyLoad(); }); ``` 4. **可...

    lazyload延迟加载

    Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。 网上也有不少类似的效果,这个Lazyload主要特点是: 支持使用window(窗口)或元素作为容器对象; 对静态(位置大小不变)元素做了大量...

    Node.js-一个组件实现lazyload图片当在视窗内(或附近)时才加载

    标题:“Node.js-一个组件实现lazyload图片当在视窗内(或附近)时才加载” 在Web开发中,性能优化是一项至关重要的任务。随着网站内容的丰富,图片资源占据了很大一部分,如果不加以优化,可能会导致页面加载速度慢...

Global site tag (gtag.js) - Google Analytics