图片懒加载

工作要帮APP加一个图片懒加载功能,本来很简单的一件事,但这个APP是外包回来的,各种乱七八糟,引入的库和框架又多,看得眼睛发疼,找图片路径都找半天,应该就是像我这样的刚培训出来的人做的!!!

HTML部分

<img class="lazyimg" src="../image/logo.png"  data-original="{{item.ShopAvatar}}"  alt="">

img元素要有lazyimg这个class,src写占位图,data-original写实际要显示的图片路径。

js部分

function lazyload(){
            setTimeout(function() {
                $('.lazyimg').each(function() {
                    var $self = $(this);
                    if ($self.is('img')) {
                        if ($self.attr('data-original')) {
                            $self.attr('src', $self.attr('data-original'));
                            $self.removeAttr('data-original');
                        }
                    }
                });
            }, 1000);
        }

在需要这个功能的页面引入JQ或者zepto,然后在获得实际图片路径数据的页面执行上面的代码。

原文地址:https://www.cnblogs.com/haqiao/p/7605436.html