大鲤余
大鲤余

懒加载、预加载IntersectionObserver和监听滚动

使用场景

移动端下拉滚动加载图片的时候，通常是使用监听scroll或者使用setInterval来判断，元素是否进入视图，其中scroll由于其特别大的计算量，会有性能问题，而setInterval由于其有间歇期，也会出现体验问题。

IntersectionObserver

允许你追踪目标元素与其祖先元素或视窗的交叉状态。IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。 即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

代码演示

<body>
    <div style="height: 1800px;width:100%; text-align: center;">
        <h3>监听目标元素与祖先或视口交叉状态的手段</h3>
        <p>./image/preview.jpg</p>
    </div>
  
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">

    <script type="module">
        import { Intersection } from './IntersectionOberver.js'
        import { watchScroll } from './监听滚动实现懒加载.js'
        // watchScroll('.imageLoad')
        Intersection('.imageLoad')
    </script>
</body>
export const Intersection = (name) => {
    const img = document.querySelectorAll(name)
    let index = 0
    const options = {
        threshold: [0],//threshold：属性决定相交比例为多少时，触发回调函数。取值为 0 ~ 1，或者 0 ~ 1的数组。
        rootMargin: "300px",//rootMargin： 类似于 CSS 的 margin 属性。用来缩小或扩大 rootBounds，从而影响相交的触发 
        root: null,//root：设置监视器的根节点，不传则默认为视口。
    }
    /*
        entries的属性
        time：发生相交到相应的时间，毫秒。
        rootBounds：根元素矩形区域的信息，如果没有设置根元素则返回null，图中蓝色部分区域。
        boundingClientRect：目标元素的矩形区域的信息，图中黑色边框的区域。
        intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，图中蓝色方块和粉红色方块相交的区域。
        isIntersecting：目标元素与根元素是否相交
        intersectionRatio：目标元素与视口（或根元素）的相交比例。
        target：目标元素。
    */
    const iso = new IntersectionObserver(entries => {

        entries.forEach(v => {
            if (v.isIntersecting) {
                if (index >= 2) index = 0
                index++
                v.target.setAttribute('src', `./image/image${index}.jpg`)
                iso.unobserve(v.target)
            }
        })

    }, options)

    // 开启观察
    img.forEach(element => {
        iso.observe(element)
    });
}

效果展示

懒加载、预加载IntersectionObserver和监听滚动_第1张图片
可以看到当元素与视口rootBounds=300px时，触发回调
懒加载、预加载IntersectionObserver和监听滚动_第2张图片

scroll方式


const thorttle = (callback,wait=500) => {
    let timer = null 
    let licence = true
    const _this = this
    return (...args) => {
        if (licence) {
            timer = setTimeout(() => {
                callback.call(_this, args)
                licence = true
                clearTimeout(timer)
            },wait)
        }
        licence = false
    }
}
//getBoundingClientRect 方法会使浏览器发生回流和重绘，性能消耗稍大，但兼容性比 Intersection Observer 要好。
export const watchScroll = (name) => {
    const img = document.querySelectorAll(name)
    //document.documentElement.clientHeight可视窗口高度
    const vHeight = window.innerHeight || document.documentElement.clientHeight

    document.addEventListener('scroll', thorttle(() => {
        let index = 0
        img.forEach(v => {
            // Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口顶部的位置。
            let {top,height } = v.getBoundingClientRect()
            if (top <= vHeight+100) {
                if (index >= 2) index = 0
                index++
                v.setAttribute('src', `./image/image${index}.jpg`)
            }
        })
    }))
}

你可能感兴趣的:(JS,javascript,前端,css3)

  • postman请求接口时自动生成sign签名 小牛_6666
    当我们使用postman测试接口时，经常会遇到接口签名，由于签名随参数而变化，导致测试起来很头疼。通过查postman的使用文档，发现可以用Pre-requestScript来生成sign。Pre-requestScript的语法和js类似，可以在发起请求之前，对参数进行处理。下边以微信H5支付签名算法为例来自动生成sign签名1，签名规则第一步设所有发送或者接收到的数据为集合M，将集合M内非空参
  • 前后端分离式项目架构流程（爆肝三万字） 信计2102罗铠威 javaEE系列专栏前后端分离式架构servlet后端前端框架项目开发流程
    文章目录个人主页：信计2102罗铠威JavaEE系列专栏前言：【前端】先创建Vue-cli项目，请选择此项目【创建路由】打开命令行工具，进入你的项目目录，输入下面命令。1.创建router目录~创建index.js文件,在其中配置路由2.在APP.vue中添加路由视图3.在main.js中配置路由【配置ElementUI】【如何使背景图片最大自适应】【登录组件模板】【注册组件模板】【创建后端项目+
  • 用 Next.js 实现静态与动态渲染的完美平衡 荣华富贵8 程序员的知识储备2程序员的知识储备3前端
    一、引言随着Web应用的复杂度不断提升，渲染性能与用户体验成为开发者与产品运营方关注的核心问题。静态站点生成（StaticSiteGeneration，SSG）与服务器端渲染（Server-SideRendering，SSR）各有优劣：前者在首屏加载速度和CDN分发方面表现卓越，而后者在动态内容更新和个性化体验上占据优势。Next.js作为React生态中领先的全栈框架，通过getStaticPr
  • JavaScript实现按键精灵（附完整源码） 源代码大师 JavaScript实战教程javascript开发语言ecmascript
    JavaScript实现按键精灵以下是使用JavaScript实现按键精灵游戏的完整源代码：按键精灵
  • React Query 优化数据获取与缓存策略 大富大贵7 程序员知识储备1程序员知识储备2程序员知识储备3vim编辑器linux算法机器学习
    引言随着前端应用规模与复杂度的不断提升，如何高效地获取、缓存以及同步服务端数据，成为提升用户体验和系统性能的关键课题。ReactQuery（现更名为TanStackQuery）凭借其轻量、灵活、可扩展的设计，已成为React社区管理服务端状态的事实标准库。本文将深入探讨ReactQuery在数据获取与缓存策略上的原理与实践，结合HTTP缓存理论、分布式系统一致性以及响应式编程等多学科知识，呈现一套
  • React.js前端框架的性能优化的误区与解决方法 前端视界 前端大数据与AI人工智能前端艺匠馆前端框架react.js性能优化ai
    React.js前端框架的性能优化的误区与解决方法关键词：React性能优化、虚拟DOM、渲染优化、组件设计、代码分割、状态管理、性能分析工具摘要：本文深入探讨React.js应用开发中常见的性能优化误区，分析其背后的原理和影响，并提供切实可行的解决方案。文章将从React核心机制入手，剖析虚拟DOM工作原理，揭示不当优化策略可能带来的反效果，并给出基于最佳实践的优化方案。通过实际代码示例、性能对
  • 前端构建工具 Webpack 5 的优化策略与高级配置 码力无边-OEC 前端webpackweb
    前端构建工具Webpack5的优化策略与高级配置当你的项目启动需要一分钟，或者每次热更新都像在“编译整个宇宙”时，你可能已经意识到了一个问题：前端构建性能，正成为开发效率的瓶颈。Webpack作为现代前端开发的基石，其配置的优劣直接决定了项目的开发体验和最终产物的质量。奇怪的是，很多开发者满足于脚手架生成的默认配置，却忽略了Webpack5带来的巨大优化潜力。本文将深入Webpack5的核心，带你
  • JavaScript:冒泡排序 爱学习的小丫
    什么是冒泡排序？经常看到这个名字，但是并不是什么了解，到底什么是冒泡排序。其实很简单，就是在一个数组中，分别让每一位与自己的下一位做对比，如果比后面的数小，则不变位置，如果比后面的数大，则调换两个数的位置，直至把最大的那个数调到最后一个，就好像冒泡一样，最大的数冒出来了。这样我们就可以通过这个方法，循环冒泡，直至这个数组的数进行升序或降序排列。举个例子说明升序冒泡：//如果有这样一个数组，里面有一
  • Java安全：SpringBoot项目中Fastjson组件的使用与安全实践 rockmelodies java安全java安全springboot
    前言Fastjson是阿里巴巴开源的一个高性能JavaJSON库，广泛用于Java对象的序列化和反序列化操作。在SpringBoot项目中，Fastjson常被用作JSON处理工具。然而，Fastjson因其高性能而广受欢迎的同时，也因多次爆出的安全漏洞而备受关注。本文将介绍如何在SpringBoot项目中正确使用Fastjson，并讨论相关的安全实践。一、SpringBoot项目中集成Fastj
  • HTML+CSS+JS binzhenliziyuan javascripthtmlcss
    HTML+CSS+JSHTML基础1.HTML文件中的DOCTYPE是什么作用？2.HTML、XML、XHTML之间有什么区别？3.前缀为data-开头的元素属性是什么？4.谈谈你对HTML语义化的理解？5.HTML5对比HTML4有哪些不同之处？6.meta标签有哪些常用用法？7.img标签的srcset的作用是什么？8.响应式图片处理优化:Picture标签9.在script标签上使用defe
  • Windows 安装 nvm-windows（Node.js 版本管理器） 听听你说的-- nuxtwindowsnode.js
    Windows安装nvm-windows（Node.js版本管理器）教程✅第一步：卸载旧版Node.js（如已安装）打开「控制面板」→「程序和功能」找到Node.js，点击卸载确保命令行输入node-v显示不是命令，表示已卸载干净✅第二步：下载安装nvm-windows下载地址：nvm-windowsGitHubReleases下载方式：找到最新版本（如1.1.12）点击下载nvm-setup.e
  • 大前端几种开发语言对比 Fighting Horse 开发语言flutterswiftkotlin
    项目概述语言特性备注基本类型BasicOperators整数、浮点数C++整数类型宽度不固定，如int，自动数值类型转换Java没有无符号整数，存在装箱Box类型C#Swift基本tuple类型KotlinT?是Box的支持原生类型数组IntArray等无符号整数是Beta的，通过内联类实现Dart运算符BasicOperators赋值、流程、算术、位、逻辑、关系运算符下标、后缀、前缀运算符三元条
  • 【云原生】Helm来管理Kubernetes集群的详细使用方法与综合应用实战 景天科技苑 云原生K8S零基础到进阶实战云原生kubernetes容器Helmk8sk8s集群
    ✨✨欢迎大家来到景天科技苑✨✨养成好习惯，先赞后看哦~作者简介：景天科技苑《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生k8s，linux，she
  • Node+OBS直播服务器搭建总结 马克关 Node教程直播nodeobs
    导语：最近研究了一下网页直播流的原理以及实现，现在就目前的实现方法做一个总结。目录直播流媒体协议拉流与推流Node服务搭建前端播放页面OBS推流配置直播流媒体协议先来了解一下基本的直播流媒体协议。http-flv,rtpm协议/特点开发者原理优点缺点http-flvAbode通过服务器把flv下载到本地缓存，然后通过NetConnection本地连接播放节省服务器消耗保密性差rtmpAbode通过
  • html css js网页制作成品——HTML+CSS中国古代物理 - 中华优秀传统文化网页设计（4页）附源码 软件技术NINI 网页源码htmlcssjavascript
    目录一、‍网站题目二、✍️网站描述三、网站介绍四、网站效果五、代码实现HTML
  • HTML与HTML5知识点复习整理 bottle Shen html前端
    **本篇文章食用的简单说明**本篇文章为复习HTML与HTML5进行了知识点梳理，其中标题六部分涉及CSS知识（有标注），加粗部分为重点！！！加粗加红为重重点！！！如有遗漏欢迎在评论区补充~推荐大家按记忆梳理部分的内容自行回忆知识点，如有遗忘部分在左下方目录处点击相应部分可以进行跳转。又是努力学习前端的一天，希望大家共同进步~~~（QAQ我只是一个表情）❤***记忆梳理***一、HTML是什么二、
  • html js 查询数据库,如何使用javascript查询数据库？
    小编典典Javascript本身不能用于处理数据库。这是使用php(或您选择的服务器端语言)完成的。Ajax用于使用javascript向您的php脚本发送请求，而javascript则会与数据库进行通信。而且不需要页面刷新。因此，您尝试使用ajax可以轻松实现。既然您提到了jquery，就可以在jquery中签出$.ajax或$.post方法，这使过程更加简单。您需要使用ajax处理表单。Aja
  • html sql连接mysql数据库_HTML连接sql数据库 旋风1968 htmlsql连接mysql数据库
    怎样从HTML网页中获取SQL数据库里的数据我现在是一名学生，第一学期快结束了，老师要CSS布局HTML小编今天和大家分享我们每个学习小组用C#做HTML是无法读取数据库的，HTML是页面前端脚本语言，要想从HTML网页中获取SQL数据库里的数据，需要借助JSP或ASP或PHP或RUBY等语言来实现。简单的关系可以这样理解：数据库JSP或ASP或PHP或RUBY等语言HTML如：在JSP页面中显示
  • html 显示 数据库图片.js,html实时显示数据 怎么让数据库的数据在html显示出来 UnstructuredIO html显示数据库图片.js
    用JS实时调用数据显示在HTML页面上不要站在现在的高度，去判定未来的事情，因为未来的你是会成长的，会有新的选择和判断。html页面上怎么显示动态数据通过AJAX实现，在html页面用ajax请分享后台获取动态数据。获取range的值就行了，然后将其显示出来，你实时改变range的值，显示的就会实时改变0functionchange(){varvalue=document.getElementBy
  • day9｜学习前端打卡 universe_01 前端算法
    时间复杂度，O（1）的时间复杂度没有for循环O（N）O（logN）并列循环，加起来N+N嵌套循环NlogN时间复杂度和运行时间是不一样的东西空间复杂度：算法存储空间和输入值之间的关系array数组：在连续的内存空间中，储存一组相同类型的元素访问：通过索引去取的index搜索：直接去找元素enumerate（index，element）函数，遍历索引和元素数组排序的时间复杂度是NlogN声明式渲染
  • 前端-VUE-页面布局-flex布局整理-傻瓜教学 偏偏潇洒程序员
    1.flex-direction:设置容器内部元素的排列方向row:定义排列方向从左到右row-reverse:从右到左column:从上到下column-reverse:从下到上图片介绍flex-direction:rowflex-direction:row-reverseflex-direction:columnflex-direction:column-reverse2.flex-:定义fl
  • 基于vue+Cesium实现交互式攻击箭头绘制
    引言在地理信息系统(GIS)和军事模拟领域，箭头绘制是一项基础且重要的功能。本文将介绍如何使用Cesium.js结合Vue框架实现交互式攻击箭头绘制功能，支持鼠标点击采集关键点、动态更新箭头形状、右键结束绘制等核心交互，并对实现过程中的关键技术点进行深入解析。功能概述本组件实现了以下核心功能：地图初始化与基础配置鼠标左键点击采集箭头关键点鼠标移动实时更新箭头形状右键点击结束绘制并输出结果动态渲染箭
  • 前端面试十一之TS 闲蛋小超人笑嘻嘻 前端
    TS是TypeScript的缩写，是一种由微软开发的开源编程语言，它是JavaScript的一个超集，为JavaScript添加了类型系统和对ES6+的支持。以下是关于TypeScript的详细介绍：一、特点类型系统：TypeScript引入了类型注解，允许开发者为变量、函数参数、返回值等添加类型信息。这有助于在编译阶段发现潜在的类型错误，提高代码的健壮性和可维护性。例如：letmessage:s
  • JavaScript 性能优化实战指南
    JavaScript性能优化实战指南一、引言JavaScript是一种广泛使用的编程语言，尤其在前端开发中占据重要地位。随着Web应用的复杂度不断增加，性能优化成为开发过程中不可或缺的一部分。性能优化不仅可以提升用户体验，还能减少服务器负载，提高应用的响应速度。本文将从多个方面详细探讨JavaScript性能优化的实战技巧，包括代码优化、内存管理、异步编程、资源加载优化等，旨在为开发者提供一份全面
  • 基于pyQt5为前端实现的智能座椅控制系统，集成了人脸识别、语音合成和座椅记忆功能，为用户提供个性化的座椅调节体验，后期可连接智能座椅。 渴死的鱼仔 qt前端开发语言
    智能座椅控制系统：基于PyQt5的个性化解决方案界面描述：一、系统概述基于PyQt5开发的智能座椅控制系统，深度融合人脸识别、语音交互与座椅记忆功能，打造个性化舒适体验。系统通过实时用户识别自动调节座椅参数，后期可无缝对接智能座椅硬件，实现"无感式"智能生活场景。二、核心功能模块1.人脸识别引擎高精度识别：基于Dlib库实现亚毫米级人脸特征提取动态管理：支持多人脸特征存储与实时匹配快速响应：毫秒级
  • 数据库、HTML
    一、数据库数据库文件与普通文件区别:普通文件对数据管理(增删改查)效率低2.数据库对数据管理效率高，使用方便常用数据库:1.关系型数据库:将复杂的数据结构简化为二维表格形式大型:0racle、DB2中型:MySq1、sQLServer小型:Sqlite2.非关系型数据库以键值对存储,且结构不固定。//JSONRedisMongoDB嵌入式数据库:sqlite3:stu.db1.开源免费，c语言开发
  • Anime.js的cleanInlineStyles用法
    第一章：动画的“身后事”——我们为什么需要清理样式？在深入探讨cleanInlineStyles这个具体的工具函数之前，理解它所要解决的根本问题至关重要。这个问题源于JavaScript动画库的核心工作机制，尤其是像Anime.js这样直接与DOM（文档对象模型）交互的库。1.1Anime.js的工作原理：内联样式的魔法与诅咒Anime.js的强大之处在于其能够以极高的性能和灵活性来驱动网页动画1
  • 【自动化从入门到进阶】Playwright 实战指南，提升测试效率必修课！ 朱公子的Note pythonPlaywright自动化
    你是否也有过“页面点击没反应，接口明明没问题”的糟心经历？就算写再多单元测试，也无法覆盖复杂的用户交互。而Playwright的出现，正为前端开发者和QA带来一剂“提效良方”：跨浏览器、强校验、自动重试、不再依赖Selenium！在2025年的软件开发浪潮中，Web应用的复杂性和用户期望持续攀升，单页应用（SPA）和跨浏览器兼容性让测试变得更加关键。想象一下，您的电商平台上线后因未发现的UI错误导
  • js数组去重的几种方法 魔仙堡杠把子灬
    我听见寒风,扰乱了叶落数组去重,这个知识点很重要,很多面试的地方都会问这个这个问题,我总结了一下第一种方法,最基本的去重方法,思路:定义一个新数组,并存放原数组中的第一个元素,然后将旧数组的元素一一与新数组的元素进行对比,如果不相同就放到新数组中代码实现vararr=[1,2,5,8,9,6,3,4,0,4,7,5,2,0,3];functionunique(arr){//定义一个新数组,新数组里
  • 网盘项目实现GitHub第三方登录 dhdjfj github
    用户访问/main/files↓路由守卫检查（未登录）↓重定向到/login?redirectUrl=/main/files↓用户点击GitHub登录↓callbackUrl="/main/files"传给后端↓后端保存到session[state]="/main/files"↓GitHub授权完成↓后端取出session[state]="/main/files"↓返回给前端callbackUrl
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他