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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
react 创建单例组件的方法
Apr 26 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
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判断字符以及字符串的包含方法属性
2008/08/30 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php中require和require_once的区别说明
2014/02/27 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
详解JS预解析原理
2020/06/16 Javascript
17个Python小技巧分享
2015/01/23 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python查询mysql,返回json的实例
2018/03/26 Python
python编写猜数字小游戏
2019/10/06 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python help函数实例用法
2020/12/06 Python
nohup的用法
2012/11/26 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
中学生期末评语
2014/02/03 职场文书
运动会方阵口号
2014/06/07 职场文书
2014年市场部工作总结
2014/11/25 职场文书
乐山大佛导游词
2015/02/02 职场文书
聚会通知怎么写
2015/04/23 职场文书
联欢会开场白
2015/06/01 职场文书