工作要帮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,然后在获得实际图片路径数据的页面执行上面的代码。