大鲤余
大鲤余

懒加载、预加载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)

  • Claude Code & Kimi K2 环境配置指南 (Windows/macOS/Ubuntu)
    ClaudeCode&KimiK2环境配置指南(Windows/macOS/Ubuntu)本指南将引导您完成安装和配置ClaudeCode和KimiK2的所有必要步骤，以利用KimiK2API的强大功能。第一步：安装Node.js和Git在开始之前，您的系统需要安装好Node.js和Git。1.Node.js下载与安装：请前往Node.js官方网站下载并安装最新版本的Node.js（建议使用v18
  • 如何区分Bug是前端问题还是后端问题？ 海姐软件测试 缺陷管理bug前端
    在软件测试中，精准定位Bug的归属（前端or后端）是高效协作的关键。以下是系统化的排查方法，结合技术细节和实战技巧：1.核心判断逻辑「数据vs展示」二分法：后端问题：数据本身错误（API返回错误数据/逻辑错误/数据库问题）前端问题：数据正确但展示异常（UI渲染错误/交互逻辑问题）2.四步定位法第一步：抓包分析（必做）工具：ChromeDevTools>Network/Fiddler/Charles
  • 前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用 前端组件分享
    前端Vue自定义顶部搜索框热门搜索历史搜索用于搜索跳转使用，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13128效果图如下：####自定义顶部搜索框用于搜索跳转使用方法```使用方法```####HTML代码实现部分```htmlimportCCBProjectListfrom'../../components/CCPro
  • 工具篇：（二）MacOS 下载 MySQL 并进行配置连接，使用 VSCode 创建 Node 项目-亲测有效 全栈探索者chen mysqlmacos工具macosmysqlvscode
    MacOS下载MySQL并进行配置连接，使用VSCode创建Node项目我们将介绍如何在macOS上下载和配置MySQL数据库，并使用VSCode创建一个Node.js项目进行测试。通过这些步骤，您将能够顺利地设置开发环境并进行基本的数据操作。一、删除之前的MySQL配置和软件在macOS系统中，下载并配置MySQL客户端之前，清理掉之前的MySQL配置和相关软件是一个关键步骤。以下是详细的操作流
  • 小架构step系列19：请求和响应 秋千码途 架构
    1概述作为Web程序，通用形式是发起HTTP请求并获取返回的结果，在这个过程中，需要把请求映射到代码的接口上，提供这种接口的类一般称为Controller，也就是需要把请求映射到Controller的接口方法上，把请求的参数映射到接口的参数中，并从接口返回接口处理的结果。在后端渲染页面的场景中，返回的结果需要处理为视图View。而现在更普遍的是前后端分离，返回的结果一般处理为JSON格式的数据，前
  • iOS WebView 调试实战 localStorage 与 sessionStorage 同步问题全流程排查 2501_91591841 ios小程序uni-appiphoneandroidwebviewhttps
    在混合开发项目中，localStorage和sessionStorage常被前端用来临时存储用户状态、页面标记等数据。但这些Web存储在iOSWebView中并不总是如预期稳定，有时会出现数据“存了又丢”、“刷新后状态消失”、甚至“另一个标签页取不到值”等异常，调试难度极高。本文以真实案例为基础，分享如何通过实际流程和工具协作，最终定位存储问题根因并制定稳定方案。一、典型用户反馈：刷新页面后状态消
  • 重学前端006 --- 响应式网页设计 CSS 弹性盒子
    文章目录盒模型一、盒模型的基本概念二、两种盒模型的对比举例三、总结Flexbox弹性盒子布局一、Flexbox的核心概念二、Flexbox的基本语法1.定义Flex容器2.Flex容器的主要属性3.Flex项目的主要属性三、Flexbox的常见布局示例四、FlexboxvsGrid布局五、总结imgobject-fitgapCSS::after伪元素详解1.基本概念2.基础语法3.关键注意事项以下
  • 重学前端007 --- 响应式网页设计 CSS 排版 Sapphire～ 前端前端
    文章目录导入字体总结浏览器给元素添加的默认值text-indent:-8px;1.text-indent属性的作用2.总结其他css导入字体这将导入OpenSans字体系列，字体粗细值为400、700和800。总结浏览器给元素添加的默认值元素默认外边距（Margin）默认内边距（Padding）作用-上下0.5em~1em无标题与内容分隔上下1em无段落间距/上下1em，左右40px无列表缩进上下
  • 开源流程引擎Camunda简介 ° 安如少年初如梦662 Java学习记录java后端
    目录简单介绍主要组件与名词介绍常见名词解释核心组件介绍一些思考与前端的关系前端逻辑的简化后端接口的专注流程引擎的控制作用数据和状态的管理监控和管理的集中化参考资料简单介绍Camunda的本质是可以独立运行的一套流程引擎，流程引擎会根据预先设定（类似流程图内的流程图）好的规则和逻辑进行流程执行。主要组件与名词介绍常见名词解释BPMN：即业务流程模型和标记，是一种业界标准的流程建模语言。Camunda
  • 轻量、高性能、易扩展——为什么 Elysia.js 是 Node.js 的未来？ 朱公子的Note 编程语言node.jsjavascriptElysia.js凭什么封神？
    “你还在用Express吗？功能不少，但每秒处理能力却像蜗牛爬行。”现如今，Serverless、边缘计算与微服务已成趋势，传统后端框架难以应对高并发需求。Elysia.js脱胎于Bun生态，以其超强性能与类型安全特性，正成为后端开发的新宠。本篇将带你深入剖析为什么它是未来绝佳选择。在Node.js生态中，Elysia.js凭借其极致的性能、优雅的API设计和强大的类型安全，迅速成为现代后端开发的
  • js扁平数组树形，根据指定节点id查询改节点下的所有子节点
    废话不多说，直接上代码functionfindAllChildren(list,parentId){constresult=[];//查找直接子节点constdirectChildren=list.filter((item)=>item.parentId===parentId);//递归查找子节点的子节点directChildren.forEach((child)=>{result.push(ch
  • Nginx 如何解决单页应用 History 模式路由的 404 难题？ wsj__WSJ nginx
    在现代前端开发中，单页应用（SPA）已经成为主流架构。无论是React、Vue还是Angular，都广泛使用History模式路由来实现无刷新页面跳转。但这个看似流畅的体验背后，却隐藏着一个容易被忽视的服务器配置问题——当用户直接访问路由地址或刷新页面时，往往会出现404错误。今天我们就来聊聊Nginx是如何通过简单配置解决这个问题的。一、History模式路由的“陷阱”先来看一个常见场景：当我们
  • 网络安全第三次作业搭建前端页面并解析
    我制作的是一个简单的登录页面网源代码1.CSS中box-sizing:border-box：使元素宽度包含边框和内边距，避免布局因padding变化错位。2.min-height:100vh：让body高度至少等于屏幕高度，确保登录框始终居中，不受内容高度影响。3..login-container的max-width:400px：限制登录框最大宽度，在大屏设备上不无限拉伸，保持美观。4.input
  • ikun-ui v0.2.7版本发布：组件功能增强与体验优化 时琦旖
    ikun-uiv0.2.7版本发布：组件功能增强与体验优化ikun-ui是一个基于Svelte框架构建的现代化UI组件库，专注于为开发者提供高质量、易用的前端组件。在最新发布的v0.2.7版本中，团队对多个核心组件进行了功能增强和体验优化，特别是在交互体验和视觉表现方面有了显著提升。组件功能增强工具提示与弹出框组件优化工具提示(Tooltip)和弹出框(Popover)组件新增了两项实用的交互控制
  • JavaScript 基础语法与核心概念实战：从变量到定时器 Elieal javascript开发语言ecmascript
    JavaScript作为前端开发的核心语言，其基础语法和数据类型是入门的关键。本文将通过实际代码示例，详解JavaScript的变量、数据类型、复合类型及常用交互功能，帮助初学者快速掌握核心概念。一、变量与基本数据类型变量是存储数据的容器，JavaScript中通过var（ES5）、let/const（ES6）声明。基本数据类型是构建复杂程序的基础，包括以下5种：//基本数据类型示例vara=10
  • javascript基本内容和标签 Sonnenblume_f IT总结编程语言javascriptIT总结
    js概念:javascript是互联网上最流行的，可以嵌套到html代码中的，一种基于对象和事件驱动的，并具有安全性能的脚本语言。具有1）向html页面中增加交互行为；2）脚本语言，语法和java类似；3）解释性语言，边执行边解释;4）跨平台，每个浏览器都具有js解释器;作用：增删HTML和css中的代码,能够动态校验数据组成：ECMAScript（核心）BOM浏览器对象模型DOM文档对象模型引入
  • 【前端】ikun-qrcode：极简的二维码生成组件，使用view而非canvas避免层级问题 青春狗头少年不会梦到格温学姐 前端
    文章目录背景ikun-qrcode界面效果如何发布一款自己的插件到uniapp市场。（5分钟搞定）背景之前在uniapp上100行搞定二维码生成，现在封装为vue组件分享出来：下载地址：https://ext.dcloud.net.cn/plugin?id=19351ikun-qrcode使用基础的view渲染二维码，需要给定宽高和单位和数据：uniapp默认整体宽度是750rpx。界面效果如何发
  • 【前端】ikun-pptx编辑器前瞻问题二： pptx的压缩包结构，以及xml正文树及对应元素介绍
    文章目录PPTX文件本质：一个压缩包核心文件解析1.幻灯片内容文件(ppt/slides/slideX.xml)2.元素类型解析文本框元素(p:sp)图片元素(p:pic)单位系统开发注意事项参考工具pptx渲染路线图PPTX文件本质：一个压缩包PPTX文件实际上是一个遵循OpenXML标准的ZIP压缩包，包含多个XML文件和其他资源。我们可以通过解压工具查看其内部结构：pptx文件├──[Con
  • Ajax与axios wwwwdn ajaxokhttp前端javascript
    本文是学习了网上的Ajax的课程总结，并加上了一些自己的总结。AjaxAjax（AsynchronousJavascriptAndXML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。XMLHttpRequest（XHR）XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定UR
  • nextjs+react接口会请求两次？
    解决Next.js+React接口重复请求问题在Next.js应用中，你可能会遇到API请求被发送两次的情况。以下是常见原因和解决方案：1.开发模式下StrictMode的影响原因Next.js默认启用React的StrictMode，在开发环境下会故意渲染两次组件以帮助发现潜在问题。解决方案//next.config.jsmodule.exports={reactStrictMode:false
  • 微信公众号定位 任小栗 微信公众号微信
    系列文章目录通过高德地图坐标转换接口，完成微信wx.getLocation（）jsdk坐标转换，实现定位高精确度效果微信公众号定位系列文章目录前言一、下载高德二、封装地图组件，vantUI三、拖拽组件，vantUI前言一起开始在百度找了坐标转换，腾讯地图转换成百度地图坐标等等方法但是误差还是很多很难搞，后来看高德原生的地图api里面有浏览器精确定位，我就想着搬到微信公众号，但是公司比较穷，用不起h
  • PHP与Web页面交互：从基础表单到AJAX实战 独立开发者阿乐 综合性原创前端php交互Web页面表单处理AJAX技术AJAX
    文章目录PHP与Web页面交互：从基础到高级实践1.引言2.基础表单处理2.1HTML表单与PHP交互基础2.2GET与POST方法比较3.高级交互技术3.1AJAX与PHP交互3.2使用FetchAPI进行现代AJAX交互4.文件上传处理5.安全性考量5.1常见安全威胁与防护5.2数据验证与过滤6.现代PHP与前端框架交互6.1构建RESTfulAPI6.2使用JWT进行认证7.性能优化7.1缓
  • JavaScript 类型转换之谜：为什么 [] + 0 = ‘0‘ 而 {} + 0 = 0？
    在JavaScript面试中，表达式[]+0和{}+0的结果差异常令人困惑。它们揭示了JavaScript类型转换的核心机制，下面我们深入解析背后的原理。案例一：[]+0='0'（字符串拼接）转换步骤：数组[]转换为原始值JavaScript对对象（包括数组）执行ToPrimitive转换：优先调用valueOf()→返回数组本身（非原始值，继续下一步）调用toString()→空数组转为空字符串
  • 网络爬虫进阶 rooney2024 爬虫
    目录一、进阶爬虫的核心挑战二、关键技术与最佳实践三、实战案例：爬取动态电商价格（伪代码示例）四、持续学习路径结语一、进阶爬虫的核心挑战动态渲染页面(JavaScript/AJAX)问题：数据由JavaScript动态加载生成，初始HTML中不存在。解决方案：浏览器自动化工具：Selenium,Playwright,Puppeteer。模拟真实浏览器行为，等待JS执行并渲染出完整DOM后再解析。无头
  • OpenHarmony外设驱动移植指南 你我皆是牛马星人 鸿蒙开发HarmonyOSOpenHarmonyharmonyosOpenHarmony鸿蒙开发源码分析迁移学习嵌入式硬件驱动开发
    往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……外设驱动子
  • 【OpenHarmony】鸿蒙开发：轻量系统服务管理|存储机制详解(一) 你我皆是牛马星人 HarmonyOS鸿蒙开发OpenHarmonyharmonyos鸿蒙开发OpenHarmony嵌入式硬件SAStore模块物联网
    往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……一、前言本
  • vscode怎么装python_vscode如何安装python
    vscode安装python的方法：1、在vscode的扩展中输入"extinstallpython"安装python插件打开VScode，Ctrl+p输入"extinstallpython"，搜索时间可能会比较长安装过程不能停止，否则重新安装；2、在配置文件“settings.json”修改python的安装路径修改用户设置-settings.json，将"python.pythonPath":
  • Android音视频探索之旅 | Webrtc 1对1音视频通话核心流程分析 慢行的骑兵 音视频android音视频webrtc
    一.前言使用Webrtc实现1对1的音视频通话，先从Web端进行学习要比直接从Android端进行学习要轻松许多（若没有JS和Html以及Node基础，查找相关基础教程，能梳理代码的逻辑即可）。本文Android端接入Webrtc是通过引入官方的sdk来实现的。本文涉及到的Demo代码包含三部分，服务器端、Web端、Android端。服务器端使用的是Node，Web使用的是Html和JS，Andr
  • docker 常见错误 零一间
    服务启动失败#systemctlstartdocker.serviceJobfordocker.servicefailedbecausethecontrolprocessexitedwitherrorcode.See"systemctlstatusdocker.service"and"journalctl-xe"fordetails解决方法修改/etc/docker/daemon.json文件(j
  • kafka 生产消息和消费消息 kafka-console-producer.sh kafka-console-consumer.sh 锅锅来了 #Kafka运维实战kafkalinq分布式
    目录kafka-console-producer.sh基本用法常用参数说明示例用法1.简单发送消息2.发送带键的消息3.从文件读取消息4.发送批量消息5.使用自定义配置配置文件示例注意事项kafka-console-consumer.sh基本用法核心参数说明常见使用场景1.实时消费最新消息2.消费历史所有消息3.使用消费组4.消费特定分区5.格式化输出6.消费JSON格式消息7.导出消息到文件8.
  • 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其他