js实现图片加载淡入淡出效果


Posted in Javascript onApril 07, 2017

本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下

HTML代码

首先是图片标记的写法:

<img data-src="/path/to/image.jpg" alt="">

需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片。

CSS代码

所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:

img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}

这样写的作用是什么?等当图片加载时,你就能看的效果了。

JavaScript代码

我们最终会将 data-src 属性去掉,换成src属性,但这是图片加载成功后的动作:

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
 img.setAttribute('src', img.getAttribute('data-src'));
 img.onload = function() {
  img.removeAttribute('data-src');
 };
});

相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。

当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。

下面是lazyload.js

var lazyLoad = {
 init: function() {
  var that = this;
  that.onerrorImgUrl = "data-error"; //图片加载失败用什么图片替换
  that.srcStore = "data-src"; //图片真实地址存放的自定义属性
  that.class = "lazy-img"; //惰性加载的图片需要添加的class
  that.sensitivity = 50; //该值越小,惰性越强(加载越少)
  minScroll = 5,
  slowScrollTime = 200;

  document.addEventListener("scroll", function() {
   that.changeimg();
  });

  setTimeout(function() {
   that.trigger();
  }, 100);

 },
 scanImage: function() {
  var that = this;
  var imgList = [];
  var allimg = [].slice.call(document.querySelectorAll('img.' + that.class + ''));
  allimg.forEach(function(ele) {
   if (!that.isLoadedImageCompleted(ele)) {
    imgList.push(ele);
   }
  });

  that.imglistArr = imgList;
 },
 isLoadedImageCompleted: function(ele) {
  return (ele.getAttribute('data-loaded') == '1')
 },
 trigger: function() {
  var that = this;
  eventType = that.isPhone && "touchend" || "scroll";
  that.fireEvent(document, eventType);
  //$(window).trigger(eventType);
 },
 fireEvent: function(element, event) {
  // 其他标准浏览器使用dispatchEvent方法
  var evt = document.createEvent('HTMLEvents');
  // initEvent接受3个参数:
  // 事件类型,是否冒泡,是否阻止浏览器的默认行为
  evt.initEvent(event, true, true);
  return !element.dispatchEvent(evt);
 },
 changeimg: function() {
  function loadYesOrno(img) {
   var windowPageYOffset = window.pageYOffset,
    windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight,
    imgOffsetTop = img.getBoundingClientRect().top + window.pageYOffset;
   return imgOffsetTop >= windowPageYOffset && imgOffsetTop - that.sensitivity <= windowPageYOffsetAddHeight;
  }

  function loadImg(img, index) {

   var imgUrl = img.getAttribute(that.srcStore);

   img.setAttribute("src", imgUrl);

   img.onload || (img.onload = function() {
     img.classList.remove(that.class);
     img.setAttribute('data-loaded', 1)
     img.removeAttribute('data-src');
     //$(this).removeClass(that.class).getAttribute('data-loaded',1),
     that.imglistArr[index] = null;
     img.onerror = img.onload = null;
    },
    img.onerror = function() {
     img.src = img.getAttribute(that.onerrorImgUrl);
     img.classList.remove(that.class);
     img.classList.add("lazy-err");
     img.setAttribute('data-loaded', 0);
     //$(this).removeClass(that.class).getAttribute('data-loaded',0),
     that.imglistArr[index] = null,
      img.onerror = img.onload = null
    });

   var newImgStack = [];
   that.imglistArr.forEach(function(ele) {

    //img标签可见并且加载未完成
    if (!that.isLoadedImageCompleted(ele)) {
     newImgStack.push(ele);
    }
   });
   that.imglistArr = newImgStack;
  }

  var that = this;
  that.scanImage();
  that.imglistArr.forEach(function(val, index) {

   if (!val) return;
   var img = val;
   if (!loadYesOrno(img) || that.isLoadedImageCompleted(img)) return;

   if (!img.getAttribute(that.srcStore)) return;

   loadImg(img, index);
  })

 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
Vue h函数的使用详解
Feb 18 Vue.js
AngularJS中的拦截器实例详解
Apr 07 #Javascript
Vue.js如何优雅的进行form validation
Apr 07 #Javascript
详解Node.js实现301、302重定向服务
Apr 07 #Javascript
Express URL跳转(重定向)的实现方法
Apr 07 #Javascript
微信小程序 首页制作简单实例
Apr 07 #Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 #Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 #Javascript
You might like
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
vue组件学习教程
2017/09/09 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
用Python编写web API的教程
2015/04/30 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python中%r和%s的详解及区别
2017/03/16 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python 把列表转化为字符串的方法
2018/10/23 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python读取ini配置文件过程示范
2019/12/23 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
EJB的基本架构
2016/09/22 面试题
好员工观后感
2015/06/17 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS