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)

  • C++自研游戏引擎-碰撞检测组件-八叉树AABB检测算法实现 千年奇葩 三维引擎c++人工智能算法八叉树
    八叉树碰撞检测是一种在三维空间中高效处理物体碰撞检测的算法，其原理可以类比为一个管理三维空间物体的智能系统。这个示例包含两个部分：八叉树部分用于宏观检测，AABB用于微观检测。AABB可以更换为均值或节点检测来提高检测精度。八叉树的构建确定根节点范围首先要为整个碰撞检测系统确定一个初始范围，这就像是为所有参与碰撞检测的物体划定一个“活动区域”。这个范围是一个能够完全容纳所有待检测物体的三维立方体空
  • Httprint 指纹识别技术：网络安全的关键洞察 蚂蚁质量 安全测试测试管理软件测试安全性测试
    引言Http指纹识别现在已经成为应用程序安全中一个新兴的话题，Http服务器和Http应用程序安全也已经成为网络安全中的重要一部分。从网络管理的立场来看，保持对各种web服务器的监视和追踪使得Http指纹识别变的唾手可得，Http指纹识别可以使得信息系统和安全策略变的自动化，在基于已经设置了审核策略的特殊的平台或是特殊的web服务器上，安全测试工具可以使用Http指纹识别来减少测试所需要的配置。本
  • 本地部署model scope魔搭大模型流程 CQller python算法深度学习机器学习jupyterpytorch
    一、安装python二、安装Gradio三、添加镜像加速四、运行字符串倒叙五、运行绘图六、安装常用软件包和库七、我目前使用的软件包和库简介八、文字生成图片AI模型九、文字回复AI模型一、安装python可参考安装步骤：python学习笔记-python安装与环境变量配置_python环境变量-CSDN博客二、安装Gradio在cmd执行以下命令。Gradio封装了功能丰富的前端用户界面，一会儿用来
  • html5游戏引擎-Pharse.js学习笔记（一） 18520195858 游戏javascriptc/c++ViewUI
    1.前言前几天随着flappybird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。我了解过cocos-2dforhtml5和phaser.js这两个引擎，其中前者比较复杂，对于有过coco
  • springboot项目配置https 愿企鹅飞（｡ò ∀ ó｡） Javajavatomcatjarspringeclipse
    1，必须去服务商购买一个ssl证书。2，以我想的是这个域名的8080端口当前端，8070当后端，3，前端配置简单直接去下载nginx证书把里面的key和证书粘到对应位置即可（用宝塔简单）4.springboot后端服务（下载Tomcat证书）按照这个方法https://blog.csdn.net/baidu_37302589/article/details/100692957配置端口配置成我需要的
  • 分析投资策略数据 Young_Zn_Cu 投资策略
    投资策略分析（在实习最后一周，当然要再多学一点金融相关知识啦，于是就有了这篇文章，以下均出于个人对投资策略的浅薄见解，欢迎大家提出建议）任务：分析私募排排网上的数据，并根据不同的策略进行分析，写出报告由于本人之前对投资部分了解较少，所以名词解释会占相当大一部分篇幅，大家可以直接移步后面部分！私募投资投资策略分析数据名词解释投资策略名词解释股票策略债券策略期货及衍生品策略多资产策略组合基金对筛选出来
  • java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ... weixin_34383618 java前端后端ViewUI
    导读：主要从4个方面来阐述，1：背景；2：思路；3：代码实现；4：使用一：封装背景像easyui之类的纯前端组件，也有下拉列表组件，但是使用的时候，每个下拉列表，要配一个URL,以及设置URL反回来的值和select的text，和value的对应关系，这有2个问题：一使用者必须知道URL，二，如果页面有10个下拉表表，要请求后台10次，肯定影响性能，而我想要的是使用者只要申明用哪个数据字典就行了，
  • IDEA接入GPT王炸秘籍，开发分析界面与ChatGPT直接无缝衔接 数行天下 AI赋能intellij-ideagptchatgptpythonjava
    大家好，我是数行天下，普通中间群体是凭借技术或业务在各行各业打工的重要群体，是AI技术的实践和推动者，个体的数字化程度越高就越能在百年未有之变局的AI时代赢得先机。各行各业数据分析、系统开发人员，科研领域研究人员，设计师，及各单位文字工作者等，谁能快速学习、加快效率，产出的内容更优质，在内卷化日益严重的环境中就更有竞争力。由于各种限制，大部分人无法有效使用GPT，即使费力注册成功也因为科学上网时间
  • 管理艺术：从策略到执行 AI天才研究院 ChatGPTAI大模型企业级应用开发实战DeepSeekR1&大数据AI人工智能大模型大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    管理艺术：从策略到执行关键词：管理艺术、策略、执行、领导力、创新、社会责任、企业文化摘要：本文深入探讨管理艺术，从策略到执行，解析管理艺术在企业的应用与实际操作。文章分为七个部分，涵盖管理艺术的基础、策略层面、执行层面、心理层面、创新层面、社会层面及综合评估与反思，旨在为读者提供全面的管理艺术指南。目录大纲第一部分：管理艺术的基础第1章：管理艺术的概述1.1管理艺术的概念与重要性1.2管理艺术的历
  • 深入探讨：CME期货CBOT高频合约历史行情数据分析方法 hightick 外盘期货高频历史行情数据集数据分析数据挖掘金融python数据库
    深入探讨：CME期货CBOT高频合约历史行情数据分析方法为了促进学习和研究，我们在此分享一部分匿名处理的外盘期货高频历史行情数据集。外盘期货分钟高频历史行情数据链接:https://pan.baidu.com/s/19zhe1CCpDM56amDKO2nMwQ?pwd=4wpq提取码:4wpq请注意，分享这些数据的目的是为了教育和研究，不构成任何投资建议。交易量与价格关系分析交易量与价格之间的关系
  • 【Vim Masterclass 笔记10】S06L23：Vim 核心操作训练之 —— 文本的搜索、查找与替换操作（第二部分） 安冬的码畜日常 VimMasterclassvim笔记vim查找与替换
    文章目录S06L23Search,Find,andReplace-PartTwo1文本替换命令`:s/old/new/`2指定范围的文本替换3特例：路径的替换4文件行号的配置5要点总结（1）搜索当前行（SameLineSearching）（2）跨行搜索（Searching）（3）替换命令（SubstituteCommand）写在前面根据李笑来《自学是门手艺》的建议，梳理完知识要点后又对这章内容制作
  • 在JS中如何转换时间格式 豆豆（前端开发+ui设计） javascript开发语言ecmascript
    在JavaScript中，如果你想要转换时间格式，通常涉及到的是日期对象的操作。JavaScript的Date对象提供了许多方法来处理和格式化日期和时间。以下是一些常用的方法来转换时间格式：1、获取日期和时间组件使用Date对象的方法来获取年、月、日、时、分、秒等组件，然后按照你需要的格式拼接字符串。letdate=newDate();letyear=date.getFullYear();//获取
  • 【GD32】从0开始学GD32单片机（5）—— USART串口通信详解 马浩同学 GD32系列单片机嵌入式硬件网络
    目录概述功能概述全双工异步通信模式参数说明串口发送串口接收例程串口通信概述USART串口将是我们接触的第一个通信协议，也是最常用的通信协议。在项目开发中，我们常常用串口来打印单片机的运行日志，在查找一些运行时异常时特别有用，如果能通过串口日志打印来找出运行时的异常，肯定就不需要再debug了，省去了很多时间。下面是GD32串口的结构框图，咋一看非常复杂，但其实日常我们只使用了其中一小部分。功能概述
  • 支持用IP地址申请HTTPS证书！ sslhttps
    通常情况下，SSL/TLS证书是为域名（如example.com）签发的，而不是直接为IP地址签发的。然而，在某些特定场景下，确实可以使用IP地址申请HTTPS证书。以下是关于使用IP地址申请HTTPS证书的详细说明：1.支持IP地址的SSL证书类型普通SSL证书：大多数SSL证书（如单域名、通配符、多域名证书）是为域名设计的，不支持直接为IP地址签发。特殊IPSSL证书：部分证书颁发机构（CA）
  • 2025年智算中心的建设成本及优化策略，以DeepSeek为鉴 数据中心运维高级工程师 运维大数据ai大数据
    引言近期DeepSeek的爆火引发了行业对智算中心建设的重新思考。据行业数据显示，目前国内智算中心的机房出租率普遍较低，算力资源过剩现象严重。在这种背景下，如何在控制成本的同时，实现智算中心的高效建设和可持续运营，成为行业亟待解决的问题。本文将详细探讨智算中心的建设成本及优化策略，涵盖适用范围、遵循标准、智算中心定义、成本关键组成部分、影响成本的因素、2025年建设A智算中心的成本估算及优化策略，
  • 前端面试题2（vue3） GIS-CL 前端面试题前端vue.js
    1.Vue3中的CompositionAPI是什么？与OptionsAPI的区别是什么？答案：CompositionAPI是Vue3引入的一种新的编程模型，它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比，CompositionAPI通过setup()函数集中管理组件的状态和行为，使得逻辑复用和代码组织变得更加容易。OptionsAPI：在Vue2中广泛使用，通过dat
  • 解析Spring Boot中的数据库迁移工具 weixin_836869520 数据库springbootoracle
    解析SpringBoot中的数据库迁移工具大家好，我是微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！随着软件开发的持续迭代，数据库的结构和数据的变更是常见的需求。为了管理和执行这些变更，数据库迁移工具成为了开发过程中的重要组成部分。本文将深入探讨如何在SpringBoot项目中集成和使用数据库迁移工具，以及常见的最佳实践和注意事项。1.数据库迁移工具介绍数据库迁移工具是一种用于
  • 如何构建高效的 Vue 3 前端项目结构 东锋1.3 vue.jsvue.js前端javascript
    假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结
  • Cursor前端开发提示词分享 前端程序猿i 前端
    点击设置将提示词复制黏贴进输入框里即可Alwaysrespondin中文DONOTGIVEMEHIGHLEVELSTUFF,IFIASKFORFIXOREXPLANATION,IWANTACTUALCODEOREXPLANATION!!!IDON'TWANT"Here'showyoucanblablabla"-Youareaseniorfrontendengineer.-Ifcommandsnee
  • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 谏君之 javascriptcsshtmljavascript
    使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
  • (学习总结24)Linux 基本命令2 瞌睡不来 linux学习
    Linux基本命令2操作文件或目录命令更改文件或目录访问权限命令chmod修改文件的所有者和所属组命令chown修改文件或目录的所属组命令chgrp更改文件或目录的属性命令chattr创建文件和目录时的默认权限掩码命令umask判断文件类型命令file显示文件或文件系统状态命令stat树状结构显示目录和文件命令tree文件添加行号命令nl统计文件行数、字数和字节数命令wc文件压缩和解压命令gzip
  • Vue3 中的 defineProps：优雅地实现子父组件传值 良月柒 vue.js前端javascript
    Vue.js一直以来都是前端开发者们钟爱的框架之一，而在最新的Vue3中，引入了一些新的特性和改进，其中之一就是defineProps。defineProps提供了一种更加明确和类型安全的方式来定义子组件的props，让子父组件之间的数据传递更加清晰和可维护。本文将介绍Vue3中defineProps的用法以及如何在子组件中使用它来接收父组件传递的props数据。什么是defineProps？de
  • linux--关于Linux的文件IO、虚拟地址空间概念、文件描述符 Bruce Jue linuxlinux服务器
    标准C库IO函数C库的IO函数时跨平台的，它是先通过例如fopen、fread这样的函数去调用对应系统内核例如windows、linux的write或者是read函数进而实现跨平台读写文件。那么一般都是要获取一个FILE*fp的内存地址，这个实际上是一个结构体，包含三个部分。在Linux中，IO是针对内存来说的。在FILE*fp来说，文件描述符其实是由linux内核给出的。C库IO的优点：存储效率
  • 断网了还能有ip地址吗？深入解析与探讨 hgdlip ip网络tcp/ip服务器网络协议断网
    在当今数字化时代，互联网已成为我们生活中不可或缺的一部分。IP地址，作为网络世界中设备的唯一标识，扮演着至关重要的角色。然而，一个常见的问题困扰着许多人：‌断网了还能有IP地址吗？本文将深入剖析这一问题，带领大家了解IP地址的本质，以及断网对IP地址的影响。‌一、IP地址的基础概念‌首先，我们需要明确什么是IP地址。IP地址（InternetProtocolAddress）是互联网中用于唯一标识网
  • vue3项目开发总结 Yaru11 vue前端
    一、项目准备1、明确项目需求和目标在开始构建项目之前，首先要明确项目的需求和目标。这包括了解项目的业务背景、功能需求、性能要求等，以便为后续的技术选型和架构设计提供指导。2、技术选型与框架选择前端框架：选择Vue3作为前端框架，利用其组件化、响应式等特性来提高开发效率和代码质量。构建工具：当前使用的是vue-cli。推荐使用Vite作为构建工具，因为它具有快速的冷启动、实时的热更新和简洁的配置等优
  • MTTK Vue Wrap 项目介绍 MTTKbelinda VUEWrapvue.js前端javascript
    关键字:Vue3,配置开发,快速开发,组件封装关于本项目概述MttkVueWrap是一个基于Vue3的组件封装工具，核心目标是通过纯JavaScript/TypeScript替代传统的单文件组件（SFC）开发模式，同时兼容与SFC的混合使用.它允许开发者通过类似JSON的配置对象或动态生成的脚本快速构建Vue组件，涵盖模板、双向绑定（v-model）、属性、事件、插槽等核心功能.项目起源在前端开发
  • 对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端 昨今 前端htmlcss
    1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic
  • 《vue.js前端框架技术》 韩靓. 前端框架vue.jsflutter
    一、引言在当今快速发展的互联网时代，前端开发技术不断推陈出新，众多框架和工具如雨后春笋般涌现，而Vue.js凭借其独特的优势，在前端开发领域中占据了重要的一席之地。它以简洁的语法、高效的性能和灵活的扩展性，为开发者提供了一种便捷且强大的方式来构建各类交互式的用户界面。无论是简单的企业展示网站、小型的移动应用，还是复杂的大型单页面应用（SPA），Vue.js都展现出了卓越的适应性和实用性，能够满足不
  • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【前缀和】2024E-分割数组的最大差值【欧弟算法】全网注释最详细分类最全的华为OD真题题解 闭着眼睛学算法 最新华为OD真题#前缀和javac++c语言华为odjavascript算法python
    可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavaC++CNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分类|不断更新
  • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【排序】2024E-热点网站统计【欧弟算法】全网注释最详细分类最全的华为OD真题题解 闭着眼睛学算法 最新华为OD真题#模拟javac++c语言华为odgolang算法leetcode
    可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出示例二输入输出解题思路代码pythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分
  • 安装数据库首次应用 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其他