zoukankan      html  css  js  c++  java
  • js——图片懒加载

    <img class="js-lazy-image centered" src="./img/dog-running.svg" width="400" height="400" data-src="./img/dog-running.jpg">
    <img class="js-lazy-image centered" src="./img/dog-running.svg" width="400" height="400" data-src="./img/dog-running.jpg">
    <img class="js-lazy-image centered" src="./img/dog-running.svg" width="400" height="400" data-src="./img/dog-running.jpg">
        .fade-in {
          animation-name: fadeIn;
          animation-duration: 1.3s;
          animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
          animation-fill-mode: forwards;
        }
    
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
    
          to {
            opacity: 1;
          }
        }
    
    .centered {
       display:block;
       margin:0 auto;
    }
    'use strict';
    var images = document.querySelectorAll('.js-lazy-image'), config = {
        rootMargin: '50px 0px',
        threshold: 0.01
    }, imageCount = images.length, observer;
    if (!('IntersectionObserver'in window))
        loadImagesImmediately(images);
    else {
        observer = new IntersectionObserver(onIntersection,config);
        for (var image, i = 0; i < images.length; i++)
            (image = images[i],
            !image.classList.contains('js-lazy-image--handled')) && observer.observe(image)
    }
    function fetchImage(a) {
        return new Promise(function(b, c) {
            var d = new Image;
            d.src = a,
            d.onload = b,
            d.onerror = c
        }
        )
    }
    function preloadImage(a) {
        var b = a.dataset.src;
        return b ? fetchImage(b).then(function() {
            applyImage(a, b)
        }) : void 0
    }
    function loadImagesImmediately(a) {
        for (var d, b = Array.from(a), c = 0; c < a.length; c++)
            d = a[c],
            preloadImage(d)
    }
    function disconnect() {
        observer && observer.disconnect()
    }
    function onIntersection(a) {
        0 === imageCount && observer.disconnect();
        for (var c, b = 0; b < a.length; b++)
            c = a[b],
            0 < c.intersectionRatio && (imageCount--,
            observer.unobserve(c.target),
            preloadImage(c.target))
    }
    function applyImage(a, b) {
        a.classList.add('js-lazy-image--handled'),
        a.src = b,
        a.classList.add('fade-in')
    }
  • 相关阅读:
    java SSM 框架 多数据源 代码生成器 websocket即时通讯 shiro redis 后台框架源码
    PHP5.5.13 + Apache2.4.7安装配置流程详解
    mybatis-generator 自动生成mapper以及实体类
    spring cloud之Feign的使用
    spring cloud 初体验
    redis 分布式锁
    Activiti 工作流之所学所感(基本配置) DAY1
    druid 连接池加密算法
    ssm+redis整合(通过aop自定义注解方式)
    aop (权限控制之功能权限)
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/9436878.html
Copyright © 2011-2022 走看看