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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
用php来检测proxy
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python 域名分析工具实现代码
2009/07/15 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
PyQt5实现简易计算器
2020/05/30 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
企业治理工作自我评价
2013/09/26 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
计生工作先进事迹
2014/08/15 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书