欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-06 12:33:56
本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码，供大家参考，具体内容如下 html代码 首先是图片标记的写法：

本文实例为大家分享了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);
  })

 }
};

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

上一篇： 笨方法学python准备工作

下一篇： 干销售，不容易啊

推荐阅读