js懒加载图片特效

前端开发需要会哪些技能
前端开发需要的代码编辑器
前端开发需要打字速度吗

html 代码片段

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta
            name=”viewport”
            content=”width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″
        />
        <title>lazyLoad</title>
        <style type=”text/css” media=”all”>
            body,
            ul,
            li {
                padding: 0;
                margin: 0;
            }
            body {
                font-size: 12px;
                -webkit-user-select: none;
                -webkit-text-size-adjust: none;
                font-family: helvetica;
            }
            .lazyLoad ul li {
                height: 200px;
                border: 1px solid red;
                margin-bottom: 2px;
                overflow: hidden;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class=”lazyLoad”>
            <ul>
                <li>
                    <span data-src=”http://www.update8.com”>我不是图片啦</span>
                </li>
                <li>
                    <img
                        data-src=”http://www.update8.com/images/01.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        data-src=”http://www.update8.com/images/02.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        data-src=”http://www.update8.com/images/03.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        data-src=”http://www.update8.com/images/04.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        data-src=”http://www.update8.com/images/05.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        data-src=”http://cdn.guopan.cn/uploads/static/img/home-bg_3502fe8.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        data-src=”http://cdn.guopan.cn/uploads/ggimg/2016-01-11/20160111114705382.jpg”
                        alt=””
                    />
                </li>
                <li>
                    <img
                        load-src=”http://cdn.guopan.cn/uploads/ggimg/2016-01-11/20160111113611440.jpg”
                        alt=””
                    />
                </li>
            </ul>
        </div>
        <script>
            var loadPic = function(obj, option) {
                if (!obj) return
                return new lazyLoad(obj, option)
            }
            function lazyLoad() {
                this.init.apply(this, arguments)
            }
            lazyLoad.prototype = {
                init: function(el, param) {
                    var opt = {
                        dataSrc: ‘lazyImg’,
                        dataImg:
                            ‘http://misc.360buyimg.com/product/home/1.0.0/widget/floor/i/loading.gif’,
                        contens:
                            typeof el === ‘string’
                                ? this.getElement(el)
                                : el || document.body,
                        cb: null,
                    }
                    if (param && param instanceof Object) {
                        for (var key in param) {
                            if (param.hasOwnProperty(key)) {
                                opt[key] = param[key]
                            }
                        }
                    }
                    console.log(opt)
                    this.opt = opt
                    this.render()
                    this.bindUI()
                },
                render: function() {
                    var _opt = this.opt,
                        _imgArr = [],
                        _dom = _opt.contens,
                        _img = _dom.querySelectorAll(‘[‘ + _opt.dataSrc + ‘]’)
                    if (_img.length) {
                        var _tagName
                        Array.prototype.forEach.call(
                            _img,
                            function(item, i) {
                                _tagName = item.tagName.toLowerCase()
                                if (
                                    _tagName === ‘img’ &&
                                    !item.getAttribute(‘src’)
                                ) {
                                    item.setAttribute(‘src’, this.opt.dataImg)
                                }
                                _imgArr.push({
                                    obj: item,
                                    tagName: item.tagName.toLowerCase(),
                                    src: item.getAttribute(_opt.dataSrc),
                                })
                            }.bind(this),
                        )
                    }
                    this.imgArr = _imgArr
                    this.loadImg()
                },
                bindUI: function() {
                    window.addEventListener(
                        ‘scroll’,
                        function(e) {
                            this.loadImg()
                        }.bind(this),
                        false,
                    )
                },
                loadImg: function() {
                    // console.log(this.imgArr);
                    var _imgArr = this.imgArr
                    var _dataSrc, _src
                    if (_imgArr.length) {
                        _imgArr.forEach(
                            function(item, i) {
                                if (this.isLoad(item.obj)) {
                                    //如果是图片
                                    if (item.tagName == ‘img’) {
                                        _dataSrc = this.opt.dataSrc
                                        _src = item.obj.getAttribute(_dataSrc)
                                        if (_src) {
                                            item.obj.setAttribute(‘src’, _src)
                                            item.obj.removeAttribute(_dataSrc)
                                            if (
                                                typeof this.opt.cb ===
                                                ‘function’
                                            ) {
                                                return this.opt.cb.call(
                                                    this,
                                                    item.obj,
                                                )
                                            }
                                        }
                                    } else {
                                        //加载文件
                                        if (typeof this.opt.cb === ‘function’) {
                                            if (_imgArr[i].isLoad) {
                                                return false
                                            }
                                            _imgArr[i].isLoad = 1
                                            return this.opt.cb.call(
                                                this,
                                                item.obj,
                                            )
                                        }
                                    }
                                }
                            }.bind(this),
                        )
                    }
                },
                isLoad: function(img) {
                    var _scrollTop =
                        document.body.scrollTop ||
                        document.documentElement.scrollTop
                    var _winHeight = window.innerHeight
                    var _offsetTop = img.offsetTop
                    var _height = img.offsetHeight
                    if (
                        _offsetTop + _height >= _scrollTop &&
                        _offsetTop <= _winHeight + _scrollTop
                    ) {
                        return true
                    }
                    return false
                },
                getElement: function(o) {
                    return document.querySelector(o)
                },
            }
            var t = loadPic(‘.lazyLoad’, {
                dataSrc: ‘data-src’,
                cb: function(item) {
                    console.log(item)
                },
            })
        </script>
    </body>
</html>
前端开发有哪些方向
web前端开发常遇到的问题有哪些
前端开发文档有哪些
» 本文来自:前端开发者 » 《js懒加载图片特效》
» 本文链接地址:https://www.rokub.com/6451.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!