lazyLoad

huangyongxing310

浏览: 496055 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AngularJS

<!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>

分享到：

滚动到指定元素、判断对象是否为空 | Http请求封装

2017-05-10 00:11
浏览 562
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

lazyLoad

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

lazyLoad

评论

发表评论

相关推荐

timer

滚动到指定元素、判断对象是否为空

Http请求封装

上传文件内容改变和上传文件

ng-click参数传递

promise（js里很多服务的then实现分析）

AngularJs directive(指令)

Anguar 工作过程

AngularJS Ajax($http)

Angularjs run(AngularJS应用中第一个被执行的方法)

AngularJs框架下controller间的传值方法

$on、$emit和$broadcast的使用

AngularJs API

AngularJS 路由

AngularJS $location

AngularJS中service，factory，provider的区别

AngularJS基础

最近访客更多访客>>