脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular 图片懒加载

angular实现图片懒加载实例代码

 更新时间：2017年06月08日 10:59:31   作者：Kagami_Tiger  
本篇文章主要介绍了angular实现图片懒加载实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦，想修改源码又不会修改，只能尽力压榨如何使用插件上。这里主要谈谈在使用插件的过程遇到的一些问题。

 一）我使用的是angular-imglazyload这个插件。【https://www.npmjs.com/package/angular-imglazyload】主要是这个插件小不依赖jquery库，然后下载源码运行成功后，我就整合到自己项目上运行，结果发现竟然只有前2张加载了，滚动了都没有反映。下面是我的代码部分：

<div ng-repeat="Digest in Digest_cont track by $index"> 
     <img src="" data-ui-lazyload="{{Digest.val}}" onerror="this.src='img/default@2x_300X300.png'" ng-if="Digest.type=='img'" alt=""> 
     <div ng-if="Digest.type=='txt'">{{::Digest.val}}</div> 
    </div>

然后css上定义了loading图片，加载中会先看到的是在加载过程的图片

复制代码 代码如下:

img[data-ui-lazyload]{ background:url(../img/icons/loading.gif) no-repeat center center;} 

一开始也不知道是什么情况，将循环图片的html代码一层一层往上放排查，经过反复查找发现是父父父级class设定的定位：position:absolute;导致了div脱离文档流导致的。而插件又是根据windows监听滚动事件的。这里的解决办法就是把定位改为relative就可以了。

然后是加载过程发现发现不知道为啥loading图片都没有出现。出现的一直是onerror定义的默认图片，一直以为是插件的问题，后来换了个插件使用。发现根源是在src=""这个属性导致的，渲染的过程认为查找不到图片就直接显示默认的图片了。这里只要删掉src属性即可解决。

然后又发现当我某几张图片定位到可是区域后，f5刷新浏览器，发现一直在加载中，图片无法显示出来，只有当我滚动下鼠标，图片才会加载出来。这个实在不清楚什么原因，我只能选择另外一个插件使用。

最终的解决方案是使用的这个插件【http://bennadel.github.io/JavaScript-Demos/demos/lazy-src-angularjs/】，发现上面的第三点问题在这里并不存在，果断使用这个插件，唯一不足是这个需要依赖于jquery库。这个插件依然是监听windows滚动事件，无法自定义监听滚动事件，因此需要注意的是以后的项目上需要懒加载的地方他的父辈元素一定不能是absolute定位。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 基于AngularJS+HTML+Groovy实现登录功能

    基于AngularJS+HTML+Groovy实现登录功能

    AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Struts或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的，本文给大家介绍AngularJS+HTML+Groovy实现登录功能
    2016-02-02
  • angularjs实现对表单输入改变的监控(ng-change和watch两种方式)

    angularjs实现对表单输入改变的监控(ng-change和watch两种方式)

    这篇文章主要介绍了angularjs通过ng-change和watch两种方式实现对表单输入改变的监控,需要的朋友可以参考下
    2018-08-08
  • AngularJs bootstrap搭载前台框架——基础页面

    AngularJs bootstrap搭载前台框架——基础页面

    本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS入门教程中SQL实例详解

    AngularJS入门教程中SQL实例详解

    本文主要介绍 AngularJS SQL,这里给大家整理了相关资料，并提供了实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • AngularJS实现多级下拉框

    AngularJS实现多级下拉框

    这篇文章主要为大家详细介绍了AngularJS实现多级下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • BootStrap+Angularjs+NgDialog实现模式对话框

    BootStrap+Angularjs+NgDialog实现模式对话框

    在完成一个后台管理系统时，需要用表格显示注册用户的信息。但是用户地址太长了，不好显示。所以想做一个模式对话框，点击详细地址按钮时，弹出对话框，显示地址。下面小编给大家分享下实现方法，一起看下吧
    2016-08-08
  • Bootstrap和Angularjs配合自制弹框的实例代码

    Bootstrap和Angularjs配合自制弹框的实例代码

    今天小编通过本文给大家分享Bootstrap和Angularjs配合自制弹框的实例代码，代码简单易懂，有需要的朋友跟着小编一起学习
    2016-08-08
  • Angular 4依赖注入学习教程之ValueProvider的使用（七）

    Angular 4依赖注入学习教程之ValueProvider的使用（七）

    这篇文章主要给大家介绍了关于Angular 4依赖注入之ValueProvider使用的相关资料，文中介绍的非常详细，对大家学习或者使用Angular4具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • 浅谈对Angular中的生命周期钩子的理解

    浅谈对Angular中的生命周期钩子的理解

    本篇文章主要介绍了Angular中的生命周期钩子的理解，详细的介绍了生命周期钩子和主要的生命周期钩子，有兴趣的可以了解一下
    2017-07-07
  • Angular企业级开发——MVC之控制器详解

    Angular企业级开发——MVC之控制器详解

    本篇文章主要介绍了Angular企业级开发——MVC之控制器详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论