GEAs
GEAs

彻底弄懂图片懒加载及底层实现原理

我们都知道图片懒加载是前端性能优化比较常见的一个手段，那么，你真的了解图片懒加载吗，本文将带你从简单到复杂一步一步彻底弄懂其底层实现原理。

试想一下，假设用户在访问我们的某个页面时，一开始就加载页面的全部图片，如果我们的网站中有大量的图片，那么整个加载过程是非常耗时的，如果这个时候用户的网络正好又是非常差的情况下，那么我们的网站就会卡在某个地方，一直加载。整个过程用户的体验效果是非常差的，这时候就需要利用图片懒加载技术。

简单实现图片懒加载
思路：给图片一个src属性存储一个加载动画的图片，data-src存储真实的图片，在图片每一进入可视区域的时候先加载加载动画的图片，等真正进入可视区域再加载真实图片。
1.获取屏幕可视区域的高度
document.documentElement.clientHeight
彻底弄懂图片懒加载及底层实现原理_第1张图片
2.获取元素相对于文档顶部的高度
element.offsetTop
彻底弄懂图片懒加载及底层实现原理_第2张图片
3.获取滚动条的高度
document.documentElement.scrollTop
彻底弄懂图片懒加载及底层实现原理_第3张图片
当元素相对于文档顶部的高度<屏幕可视区域的高度+滚动条的高度
说明图片已经在视野范围内了，可以加载图片，下面是具体的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="./img/loading.gif" data-src="./img/1.png" alt="">
  <img src="./img/loading.gif" data-src="./img/2.png" alt="">
  <img src="./img/loading.gif" data-src="./img/3.png" alt="">
  <img src="./img/loading.gif" data-src="./img/4.png" alt="">
  <img src="./img/loading.gif" data-src="./img/5.png" alt="">
  <img src="./img/loading.gif" data-src="./img/6.png" alt="">
</body>

<script>
    let num = document.getElementsByTagName("img").length
    let imgs = document.getElementsByTagName("img")

    let n = 0
    function lazyload(imgs){
      //获取可视区域的高度
      let visibleHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      for (let i = n; i < num; i++){
        if (imgs[i].offsetTop < visibleHeight + scrollTop) {
          if (imgs[i].getAttribute("src") === "./img/loading.gif") {
            imgs[i].src = img[i].getAttribute("data-src")
          }
          n = i + 1 // 加载过的图片防止二次加载
        }
      }
    }
    window.onload = window.onscroll = function () { 
      //onscroll()在滚动条滚动的时候触发
      lazyLoad(imgs);
    }
</script>
</html>

使用getBoundingClientRect()实现图片懒加载
getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 是DOM元素到浏览器可视范围的距离。

思路：只需要获取img元素相对于视口的顶点位置rectObject.top，只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域。
实现方法

function isInVisible(el){
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  return bound.top <= clientHeight;
}
只需把上面代码的
//imgs[i].offsetTop < visibleHeight + scrollTop替换成isInVisible(imgs[i])就可以了

使用IntersectionObserver实现图片懒加载
IntersectionObserver可以观察一个元素是否在视窗可见。
使用方法

let io = new IntersectionObserver(callback, option);
/ 开始观察
io.observe(document.getElementById('container'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

具体实现代码

    const imgs =  document.querySelectorAll('img')
    function lazyLoad(target) {
      const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entrie => {
          if (entrie.isIntersecting) {
            const img = entrie.target;
            const src = img.getAttribute('data-src');
            img.setAttribute('src', src)
            observer.unobserve(img); // 停止监听已开始加载的图片
          }

        })
      }, {});
      io.observe(target)
    }

    imgs.forEach(img => {
      lazyLoad(img);
    })

好了，今天的分享就到这里！

你可能感兴趣的:(学习总结,JS高级部分,前端,javascript,html)

  • 「JavaScript深入」Socket.IO：基于 WebSocket 的实时通信库 八了个戒 JavaScript系列面试宝典大前端javascriptwebsocket开发语言前端
    Socket.IOSocket.IO的核心特性Socket.IO的架构解析Socket.IO的工作流程Socket.IO示例：使用Node.js搭建实时聊天服务器1.安装Socket.IO2.服务器端代码（Node.js）3.客户端代码（HTML+JavaScript）4.房间功能高级功能实现1.命名空间2.中间件3.二进制传输性能优化策略1.负载均衡2.资源管理3.监控与调试安全与可靠性1.安全
  • 青少年编程与数学 02-011 MySQL数据库应用 10课题、记录的操作 明月看潮生 编程与数学第02阶段数据库青少年编程mysql编程与数学
    青少年编程与数学02-011MySQL数据库应用10课题、记录的操作一、表的记录表的记录的组成示例插入记录查看记录记录的操作1.插入记录（INSERT）2.更新记录（UPDATE）3.删除记录（DELETE）4.查询记录（SELECT）记录的约束示例：带约束的表总结二、添加记录1.插入单条记录插入单条记录2.插入多条记录插入多条记录3.插入部分字段插入部分字段4.插入查询结果插入查询结果5.插入时
  • 为微服务架构增加聚合层 hello_world! 云原生springboot
    最近公司业务繁忙，全力以赴在做狐小E，一直没时间做技术分享，现在上线了，终于有时间来写点东西。网关是微服务架构不可或缺的一部分，作为微服务架构的唯一入口，将所有请求转发到后端对应的微服务上去，同时又可以将各个微服务中的通用功能集中到网关去做，而不是在每个微服务都实现一遍，比如权限校验，限流，熔断和监控等。如图所示，这是个典型的前后端分离的微服务架构，但这个架构在的问题是，一个接口无法同时满足不同场
  • LeetCode 21Merge Two Sorted Lists 合并两个排序链表 Java 我欲混吃与等死 LeetCodeleetcode链表java
    题目：将两个已排序的链表合并在一起。举例1：输入：list1=[1,2,4],list2=[1,3,4];输出：[1,1,2,3,4,4];举例2：输入：list1=[],list2=[];输出：[]举例3：输入：list1=[],list2=[0];输出：[0]解题思路：遍历两个链表，比较节点值来合并链表，当其中一个链表遍历完成时，将另一个链表剩余部分拼入新链表。/***Definitionfo
  • 华山论剑，大模型(deepseek qwq gemini)辩论人生意义 Lifeng66666666 语言模型语言模型人工智能
    借助DeepDiscussion程序，通过让大模型(deepseekqwqgemini)讨论“人生意义是什么”这一挑战问题，我们得以客观观察目前这几种大模型的价值观，能力，不足。部分讨论过程：问题:人生的意义是什么？deepseek/deepseek-r1:free初始方案:针对“人生的意义是什么”这一终极问题，我的解决方案分为以下五个层次，融合东西方哲学智慧与实践心理学，并提供具体行动方向：一、
  • Flowable 6.6.0应用指南 - Flowable UI应用安装 月满闲庭 #应用指南中英文对照版
    培训视频推荐CSDN上提供了Flowable6.6.0的系列培训视频课程，欢迎有兴趣的朋友前往学习。《Flowable流程入门课程》《Flowable流程高级课程》《Flowable从入门到精通》Flowable6.6.0用户指南相关文档下载BPMN用户指南第一部分-中文PDF精编版BPMN用户指南第二部分-中文PDF精编版BPMN用户指南第三部分-中文PDF精编版应用程序指南-中文PDF精编版应
  • vscode设置console.log的快捷输出方式 活宝小娜 vscodevscodeide编辑器
    vscode设置console.log的快捷输出方式编辑器中输入clg回车，可以直接输出console.log，并且同步输出变量的字符串和值1、打开vscode点击左上角的文件2、找到首选项3、点击用户代码配置4、在顶部输入框种输入javas，选择JavaScript选项5、打开里面注释的代码，写入如下内容{//Placeyoursnippetsforjavascripthere."Printto
  • github上传文件方法格式 镜宇秋霖丶 githubgithub
    echo"#myHtmlFirst1.0">>README.mdgitinitgitaddREADME.md(这条指令改成下面的)gitadd.gitcommit-m"firstcommit"[email protected]:xxxxxxxxx/myHtmlFirst1.0.gitgitpush-uoriginmain以上是第一次上传以
  • Java对象的hashcode 阿黄学技术 Java基础java开发语言
    在Java中，hashcode和equals方法是Object类的两个重要方法，它们在处理对象比较和哈希集合（如HashMap、HashSet）时起着关键作用。对于equals大部分Java程序员都不陌生，它通常是比较两个对象的内容(值)是否相等(==双等于比较对象的内存地址)，如果是Object中的equals方法默认就是比较内存地址(在没有被重写的情况下和==一样)。hashCode方法返回对
  • HTML语言的贪心算法 宇瞳月 包罗万象golang开发语言后端
    HTML语言的贪心算法：理论与实践引言在编程和算法研究中，贪心算法是一种广泛应用的解决问题的方法。它通过对每一阶段选择最优解的方式来构建整个问题的解决方案。贪心算法不一定能在所有情况下得到最优解，但在许多实际问题中，它能够提供一个足够好的近似解。本文将探讨贪心算法的基本概念、典型应用、优缺点，并结合HTML语言的特点，提出一些具体的实现示例和思考。一、贪心算法的基本概念贪心算法是一种求解最优化问题
  • 05-项目为什么总是延期 javascript
    当前一个项目在开发新需求的时候，我们制定的计划只是列出功能开发的部分，并不是整个项目全部的周期，这就造成项目从开始到能够正式上线，时间规划是不全面、不清晰的（只是代码编写部分有时间计划），项目负责人基本上只会关注功能开发的部分，至于内部验收、Bug修复、测试周期和版本发布时间等等环节，有点听天由命，完全是看前一个环节进展的情况而定——前一个环节进展顺利，那就到下一个环节，进展不顺利就变更下个环节的
  • 前端开发：这就是终点吗？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
  • 景联文科技提供高质量文本标注服务，驱动AI技术发展 景联文科技 科技人工智能
    文本标注是指在原始文本数据上添加标签的过程，这些标签可以用来指示特定的实体、关系、事件等信息，以帮助计算机理解和处理这些数据。文本标注是自然语言处理（NLP）领域的一个重要环节，它通过为文本的不同部分提供具体的含义和上下文信息，增强机器学习和深度学习模型对文本内容的理解能力。标注类型情感分析情感极性：确定文本表达的情感倾向，如正面、负面或中立。强度评估：衡量情感的强烈程度，从轻微到极端不等。命名实
  • SpringBoot接口防抖(防重复提交)，接口幂等性，轻松搞定 web18285482512 面试学习路线阿里巴巴springboot后端java
    啥是防抖？所谓防抖，一是防用户手抖，二是防网络抖动。在Web系统中，表单提交是一个非常常见的功能，如果不加控制，容易因为用户的误操作或网络延迟导致同一请求被发送多次，进而生成重复的数据记录。要针对用户的误操作，前端通常会实现按钮的loading状态，阻止用户进行多次点击。而对于网络波动造成的请求重发问题，仅靠前端是不行的。为此，后端也应实施相应的防抖逻辑，确保在网络波动的情况下不会接收并处理同一请
  • 超详细Python教程——初识Python 月流霜 python数据库服务器
    初识Python温馨提示：2018年创建这个仓库的时候，关于Python语言基础这个部分的内容写得相对是比较粗糙，对粗学者可能不是那么友好。如果你正好是一名初学者，建议你移步到我的另一个仓库Python-for-Freshmen-2023，这个仓库对初学者更加友好，对应的内容，大家也可以在我的知乎专栏“从零开始学Python”中找到，点击进入传送门。Python简介Python的历史1989年圣诞
  • 手写promise ,实现 then ,catch,finally,resolve,reject,all,allSettled 会飞的鱼先生 前端javascript开发语言
    完整代码原生Promise的用法1.Promise是JavaScript中用于处理异步操作的重要工具。它代表了一个异步操作的最终完成或失败，并且使异步方法可以像同步方法那样返回值。resolve：当异步操作成功时调用的函数，用于将Promise的状态改为fulfilled，并将结果值传递给后续的.then()方法。reject：当异步操作失败时调用的函数，用于将Promise的状态改为reject
  • 春招，作为普通IT实习生的我有哪些想法和准备？ 十八朵郁金香 学习
    想法&随记对即将毕业的大学生来说，秋招和春招是求职的好机会，也是一次尝试向社会进行"自我推销"的机会，体现自己的综合能力，是“意满签Offer”？还是“露出马脚，社死场面”？“准备-天时地利人和-行动”后，我们会有答案。话题回到自己，春招，我有哪些想法？去年，在学校举办校园秋招招聘之前，我已经通过线上投递+线下面试找到实习，在一家人数规模100~200的公司当前端实习生，到现在已有四个多月，没有经
  • [前端面试场景题]虚拟列表 GISer_Jinger 前端面试
    嗯，用户问的是“前端虚拟列表详解”，我需要详细回答这个问题。首先，我得先理解虚拟列表的概念和用途。根据搜索结果，虚拟列表主要用于优化长列表的渲染性能，特别是在处理大量数据时。用户可能想知道它的核心原理、实现方法以及实际应用场景。看网页1提到虚拟列表的定义和关键点，只渲染视口内的数据项，减少DOM节点。网页2和网页4都给出了具体的Vue和原生JS实现案例，比如动态计算起始和结束索引，使用transf
  • 嵌入式系统的核心组成部分处理器、存储器、传感器和执行器 getapi 单片机嵌入式硬件信号处理
    处理器、存储器、传感器和执行器是嵌入式系统的核心组成部分。它们共同协作，完成从数据采集到处理再到执行的完整流程。以下是对这些组件的详细解析：1.处理器（Processor）定义处理器是嵌入式系统的大脑，负责执行指令、处理数据和控制其他组件。主要功能执行程序代码。控制外设（如存储器、传感器、执行器）。处理数据输入和输出。分类微控制器（MCU）集成了处理器核心、存储器和外设的单芯片解决方案。适合低成本
  • 微信小程序的旅游服务助手 景点 酒店 旅游规划的设计与实现 QQ1304979694 微信小程序旅游小程序
    文章目录具体实现截图本项目支持的技术语言研究思路、方法和步骤本系统开发思路主要软件与实现手段系统可行性分析源码获取详细视频演示：文章底部获取博主联系方式！！！！java类核心代码部分展示微信小程序技术现状源码获取/详细视频演示具体实现截图本项目支持的技术语言前端开发框架:vue.js+uniapp数据库mysql版本不限微信开发者工具/hbuiderx数据库工具：Navicat/SQLyog等都可
  • java队列实现限流_如何使用队列实现微服务限流算法？ 纽太普 java队列实现限流
    队列在平时开发中可能是出现频率最高的数据结构之一了，但是大部分情况下，我们都是用别人已经实现好的，比如kafka，比如redis里的list，以至于让人怀疑为什么还要去学习队列呢？希望今天的内容可以给你一些启发。什么是队列为了整个文章的完整性，我们还是来介绍一下什么是队列。我们举个生活中常见的案例，假设你在周杰伦的奶茶店买奶茶，由于人很多，为了保持公平和秩序，你被要求排队，最先来的人排到最前面，这
  • HTML5实现左右滑动数据变化 ice_junjun HTML左右滑动
    在HTML中怎么样实现左右滑动？代码附上Bootstrap实例-下拉菜单（Dropdowns）-->-->欢迎登陆页面！这是一个超大屏幕（Jumbotron）的实例。学习更多-->响应式表格布局产品付款日期状态产品123/11/2013待发货产品210/11/2013发货中产品320/10/2013待确认产品420/10/2013已退货产品123/11/2013待发货产品210/11/2013发货
  • 鸿蒙系统--搭建Ubuntu环境 ice_junjun ubuntulinuxbash
    搭建Ubuntu环境在嵌入式开发中，很多开发者习惯于使用Windows进行代码的编辑，比如使用Windows的VisualStudioCode进行OpenHarmony代码的开发。但当前阶段，大部分的开发板源码还不支持在Windows环境下进行编译，如Hi3861、Hi3516系列开发板。因此，建议使用Ubuntu的编译环境对源码进行编译。在以上的设备开发场景中，可以搭建一套Windows+Ubu
  • 深入理解 JSON.stringify：优雅输出 JSON 数据 天天进步2015 前端开发json
    在JavaScript开发中，JSON数据的处理是一项基础且关键的技能。JSON.stringify()方法作为将JavaScript对象转换为JSON字符串的标准工具，其功能远不止于简单的数据转换。本文将深入探讨JSON.stringify()的使用技巧、参数配置以及常见陷阱，帮助开发者更优雅地处理JSON数据输出。基础用法JSON.stringify()的基本语法如下：JSON.stringi
  • JavaScript的函数拦截技术详解 天天进步2015 前端开发javascript开发语言ecmascript
    引言在JavaScript的世界里，函数是一等公民。它们可以被赋值给变量，作为参数传递，甚至可以被动态修改。函数拦截（FunctionInterception）是一种强大的技术，允许开发者在不修改原始函数代码的情况下，拦截、监控和修改函数的行为。本文将深入探讨JavaScript函数拦截的各种技术、应用场景以及最佳实践。什么是函数拦截？函数拦截是指在函数执行前、执行中或执行后插入自定义逻辑的过程。
  • JavaScript常用函数测试demo sunny05296 JavaScriptjavascript开发语言ecmascript
    JavaScript常用函数测试demovimJavaScriptTestDemo.html内容如下：JavaScriptfunctionstestdemoEnterF12toviewtheconsoleoutputmessageofconsole.log()EnterF5torefresh//JavaScriptint2string/string2inttestfunctiontest01(){
  • 麒麟服务器操作系统PostgreSQL环境部署手册 太极淘 麒麟操作系统管理工具linux服务器
    软件简介PostgreSQL是一个免费的对象-关系数据库服务器(ORDBMS)，在灵活的BSD许可证下发行。ORDBMS（对象关系数据库系统）是面向对象技术与传统的关系数据库相结合的产物，查询处理是ORDBMS的重要组成部分，它的性能优劣将直接影响到DBMS的性能。软件环境操作系统环境操作系统版本操作系统架构银河麒麟服务器操作系统V10SP系列X86-64银河麒麟服务器操作系统V10SP系列ARM
  • 桥接模式 (Bridge Pattern) 直隶码农 二十三种设计模式桥接模式c++设计模式
    桥接模式(BridgePattern)是一种结构型设计模式，它将抽象部分与实现部分分离，使它们可以独立变化。一、基础1意图将抽象部分与实现部分分离，使它们可以独立变化。2适用场景当你不希望在抽象和实现部分之间有固定的绑定关系时。当类的抽象以及它的实现都应该可以通过生成子类的方法加以扩充时。当对一个抽象的实现部分的修改应对客户不产生影响时。当你想对客户完全隐藏抽象的实现部分时。当你有许多类要生成的类
  • C++ XML文件和解析 RangoLei_Lzs C++前端服务器xmlc++
    XML（可扩展标记语言）是一种用于存储和传输数据的标记语言。它具有自描述性和平台无关性的特点。XML文档的格式主要由一组嵌套的元素和属性构成，结构清晰，易于理解和解析。XML文档的基本格式一个XML文档通常包括以下部分：XML声明：标识文档和版本信息。根元素：整个XML文档只能有一个根元素，所有其他元素必须嵌套在根元素内。元素：具有开始标签和结束标签，可以嵌套其他元素。属性：为元素提供额外的信息。
  • 前端 | debounce 防抖 vs 节流（throttle） 要加油哦～ vue项目vue学习笔记前端
    重点知识点：-防抖，最后一次操作后等待执行，用于输入框、缩放等；-节流，每隔一定时间间隔执行，用于页面滚动、鼠标移动、频繁点击。debouncevsthrottle（节流）功能debounce（防抖）throttle（节流）触发时机最后一次操作结束后等待执行每隔一定时间间隔执行一次适用场景输入框、缩放等，操作停止后才执行页面滚动、鼠标移动、频繁点击等目录debouncevsthrottle（节流）
  • 安装数据库首次应用 Array_06 javaoraclesql
    可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面 这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！ 注意第一次，使用SQL D
  • Weblogic Server Console密码修改和遗忘解决方法 bijian1013 Welogic
            在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。 一.修改Console密码         打开weblogic控制台，安全领域 --> myrealm -->&n
  • IllegalStateException: Cannot forward a response that is already committed Cwind javaServlets
    对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。 示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi
  • 基于流的装饰设计模式 木zi_鸣 设计模式
    当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。 自定义的类成为装饰类 模仿BufferedReader，对Reader进行包装，体现装饰设计模式 装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。 装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系 装饰类因为增强已有对象，具备的功能该
  • Linux中的uniq命令 被触发 linux
    Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情 况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件 说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个
  • 正则表达式Pattern 肆无忌惮_ Pattern
    正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。   例如，我们需要对QQ号码格式进行检验 规则是长度6~12位  不能0开头  只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs
  • Oracle高级查询之OVER (PARTITION BY ..) 知了ing oraclesql
    一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se
  • Python调试 矮蛋蛋 pythonpdb
    原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d
  • webservice传递自定义对象时函数为空，以及boolean不对应的问题 alleni123 webservice
    今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。 进行debug之后，发现服务器端返回的确实是有值的对象。 后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。 本来是因为逻辑上不需要在客户端使用setter， 结果改了之后竟然不能获取带属性值的
  • java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针 百合不是茶
    C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：   定义一个指针p来指向a的地址（&是地址符号）：        
  • Eclipse打不开，提示“An error has occurred.See the log file ***/.log” bijian1013 eclipse
    打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
  • spring aop实例annotation方法实现 bijian1013 javaspringAOPannotation
            在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav
  • [Velocity一]Velocity语法基础入门 bit1129 velocity
    用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html   注释 1.行级注释## 2.多行注释#*  *#   变量定义 使用$开头的字符串是变量定义，例如$var1, $var2,   赋值 使用#set为变量赋值，例
  • 【Kafka十一】关于Kafka的副本管理 bit1129 kafka
    1. 关于request.required.acks   request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在   Th
  • lua统计nginx内部变量数据 ronin47 lua nginx　 统计
    server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(
  • java-11.二叉树中节点的最大距离 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root"
  • Netty源码学习-ReadTimeoutHandler bylijinnan javanetty
    ReadTimeoutHandler的实现思路： 开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim
  • jquery验证上传文件样式及大小(好用) cngolon 文件上传jquery验证
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.
  • 浏览器兼容【转】 cuishikuan css浏览器IE
    浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
  • Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数 daizj shell$#$?特殊变量
    前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949   特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个
  • 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID! dcj3sjt126com unix
    翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原
  • android Activity间List传值 dcj3sjt126com Activity
    第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
  • tomcat 设置java虚拟机内存 eksliang tomcat 内存设置
    转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space   ------------
  • Android 数据库事务处理 gqdy365 android
    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事
  • Java 打开浏览器 hw1287789687 打开网址open浏览器open browser打开url打开浏览器
    使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址 使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789
  • ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件 justjavac chromeGooglegoogle apichrome插件
    Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧
  • 进程VS.线程 m635674608 线程
    资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点： 多进程模式最大
  • Linux下安装MemCached 字符串 memcached
    前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
  • java设计模式之--jdk动态代理（实现aop编程） Supanccy2013 javaDAO设计模式AOP
        与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &
  • Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持 wiselyman spring 4
    2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展 使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService {
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他