奔跑的瓜牛
奔跑的瓜牛

JQ封装图片预加载插件

我们知道，图片的加载，特别是资源较大的图片，加载相当耗费时间。为了提高用户体验，不得不使用图片预加载技术来提前加载，以提高用户在浏览时的流畅度。

先来弄明白图片的懒加载和预加载的不同：

 1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

 

下面来封装一个预加载插件，同时讲解它的用法：

整个框架代码：

  1 DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>preloadtitle>
  6     <style>
  7         *{margin:0;pading:0;}
  8         a{
  9             text-decoration: none;
 10         }
 11         .box {text-align:center;}
 12         .btn{
 13             display:inline-block;
 14             height:30px;
 15             line-height:30px;
 16             border:1px solid #ccc;
 17             background: #fff;
 18             padding:0 10px;
 19             margin-right:50px;
 20             color: #333;
 21         }
 22         .btn:hover{
 23             background: #eee;
 24         }
 25         /*进度条样式*/
 26         .loading{
 27             position:fixed;
 28             top:0;
 29             left:0;
 30             bottom:0;
 31             right:0;//撑满整个屏幕
 32             background: #eee;
 33             text-align: center;
 34             font-size:30px;
 35             font-weight:bold;
 36         }
 37         .progress{
 38             margin-top:300px;
 39         }
 40     style>
 41 head>
 42 <body>
 43 
 46     <div class="box">
 47         <img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" alt="pic" width="1000">
 48         <p>
 49             <a href="javascript:;" class="btn" data-control="prev">上一张a>
 50             <a href="javascript:;" class="btn" data-control="next">下一张a>
 51         p>
 52     div>
 53     
 54     <div class="loading">
 55         <p class="progress">0%p>
 56     div>
 57     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">script>
 58     <script src="js/preload.js">script>
 59     <script>
 60         var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',
 61             'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',
 62             'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],
 63             index = 0,
 64             len = imgs.length;
 65             $progress = $('.progress');
 66               //有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法
 67 //            $.preload(imgs,{
 68 //                order:'ordered'
 69 //            });
 70 
 71         //调用无序预加载   --imgs 数组存放预加载的图片
 72         $.preload(imgs,{
 73             //每张图片加载(load事件)一次触发一次each()
 74             each:function (count) {
 75                 //进度条显示百分比进度
 76                 $progress.html(Math.round((count + 1) / len * 100) + '%');
 77             },
 78             //加载完毕
 79             all: function () {
 80                 $('.loading').hide();
 81                 document.title = '1/' + len;//初始化第一张
 82             }
 83         });
 84         //未封装成插件的无序预加载
 85 //        $.each(imgs,function(i,src){
 86 //            var imgObj = new Image();   //Image()实例用于缓存图片
 87 //
 88 //            $(imgObj).on('load error',function(){
 89 //                $progress.html(Math.round((count + 1) / len * 100) + '%');
 90 //
 91 //                if(count >= len - 1){
 92 //                    $('.loading').hide();
 93 //                    document.title = '1/' + len;
 94 //                }
 95 //                count++;//每加载完一张图片count加1
 96 //            });
 97 //
 98 //            imgObj.src = src;//缓存图片
 99 //        });
100         //上一页，下一页按钮
101         $('.btn').on('click',function(){
102             if('prev' === $(this).data('control')){
103                 index = Math.max(0,--index);
104             }else{
105                 index = Math.min(len - 1,++index);
106             }
107             document.title = (index + 1)+'/' + len;
108             $('img').attr('src',imgs[index]);
109         });
110     script>
111 body>
112 html>

JQ插件部分：(preload.js)

 1 ;(function($){
 2 
 3     function PreLoad(imgs, options){
 4         //保存图片到数组
 5         this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
 6         this.opts = $.extend(PreLoad.defaults,options);
 7 
 8         // this._unordered();//如果只有无序预加载
 9         if(this.opts.order === 'ordered'){
10             this._ordered();
11         }else{
12             this._unordered();//默认是无序预加载
13         }
14     };
15     PreLoad.defaults = {
16         order: 'unordered', //指定默认加载方式为无序
17         each: null, //每一张图片加载完毕后执行
18         all: null //所有图片加载完毕后执行
19     };
20     //有序预加载
21     PreLoad.prototype._ordered = function(){
22         var opts = this.opts,
23             imgs = this.imgs,
24             len = imgs.length,
25             count = 0;
26 
27         load();
28         function load(){
29             var imgObj = new Image();
30 
31             $(imgObj).on('load error', function () {
32                 //相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理
33                 opts.each && opts.each(count);
34 
35                 if(count >= len){
36                     //所有图片加载完毕
37                     opts.all && opts.all();
38                 }else{
39                     //如果没加载完，继续调用自身加载下一张
40                     load();
41                 }
42                 count++;
43             });
44 
45             imgObj.src = imgs[count];//缓存图片
46         };
47     };
48 
49     //无序加载
50     PreLoad.prototype._unordered = function(){
51         var imgs = this.imgs,
52             opts = this.opts,
53             count = 0,
54             len = imgs.length;
55 
56         $.each(imgs,function(i,src){
57             //判断图片数组中的每一项是否为字符串，不是字符串会导致出错，因此返回
58             if(typeof src != 'string') return;
59 
60             var imgObj = new Image();
61 
62             $(imgObj).on('load error',function(){
63                 //判断opts.each是否存在，不存在则不执行
64                 opts.each && opts.each(count);
65 
66                 if(count >= len - 1){
67                     //判断opts.all是否存在，存在则执行
68                     opts.all && opts.all();
69                 }
70                 count++;
71             });
72 
73             imgObj.src = src;//缓存图片
74         });
75     };
76 
77     //由于不用具体的对象去调用，因此用$.extend(object)挂载插件.
78     $.extend({
79         //preload为插件名
80        preload: function(imgs,opts) {
81            new PreLoad(imgs,opts);
82        }
83     });
84 
85 })(jQuery);

 

根据我们的需求来调用不同的插件，将未来可能用到的图片用Image()实例缓存起来。

 

你可能感兴趣的:(JQ封装图片预加载插件)

  • k8s:安装 Helm 私有仓库ChartMuseum、helm-push插件并上传、安装Zookeeper 云游 dockerhelmhelm-push
    ChartMuseum是Kubernetes生态中用于存储、管理和发布HelmCharts的开源系统，主要用于扩展Helm包管理器的功能核心功能‌集中存储‌：提供中央化仓库存储Charts，支持版本管理和权限控制。‌‌跨集群部署‌：支持多集群环境下共享Charts，简化部署流程。‌‌离线部署‌：适配无网络环境，可将Charts存储在本地或局域网内。‌‌HTTP接口‌：通过HTTP协议提供服务，用户
  • 前端项目架构设计要领
    1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目
  • Android ViewBinding 使用与封装教程 积跬步DEV Android开发实战大全android
    AndroidViewBinding使用与封装教程：一、ViewBinding是什么？核心功能：为每个XML布局文件自动生成一个绑定类（如ActivityMainBinding），直接暴露所有带ID的视图引用。优点：避免繁琐的findViewById()，类型安全且编译时检查。对比DataBinding：ViewBinding仅处理视图引用，无数据绑定功能。DataBinding支持双向数据绑定，
  • 【前端】jQuery数组合并去重方法总结
    在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
  • 计算机网络技术 CZZDg 计算机网络
    目录一.网络概述1.网络的概念2.网络发展是3.网络的四要素4.网络功能5.网络类型6.网络协议与标准7.网络中常见的概念8.网络拓补结构二.网络模型1.分层思想2.OSI七层模型3.TCP/IP五层模型4.数据的封装与解封装过程三.IP地址1.进制转换2.IP地址定义3.IP地址组成成分4.IP地址分类5.地址划分6、相关概念一.网络概述1.网络的概念两个主机通过传输介质和通信协议实现通信和资源
  • cesium添加原生MVT矢量瓦片方案 zhu_zhu_xia cesiumvuearcgiscesiumwebgljavascript
    项目中需要基于cesium接入mvt格式的服务并支持属性拾取查询，通过一系列预研测试，最后选择cesium-mvt-imagery-provider开源插件完成，关键源码信息如下：npmicesiumcesium-mvt-imagery-provider//安装依赖包//加载图层importCesiumMVTImageryProviderfrom"cesium-mvt-imagery-provid
  • 日历插件-FullCalendar的详细使用 老马聊技术 JavaScript前端javascript
    一、介绍FullCalendar是一个功能强大、高度可定制的JavaScript日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。二、实操案例具体代码如下：FullCalendar日期选择body{font-family:Arial,sans-serif;margin:20px;}#calendar{max-width:900
  • AIGC工具与软件开发流程的深度集成方案 Irene-HQ 软件开发测试AIGC测试工具githubAIGC程序人生面试
    一、代码开发环节集成路径‌环境配置标准化‌安装AIGC工具包并配置环境变量（如设置AIGC_TOOL_PATH），确保团队开发环境一致‌。在IDE插件市场安装Copilot等工具，实现编码时实时建议调用‌。‌人机协作新模式‌‌需求解析‌：上传PRD文档，AI自动提取业务规则生成类结构（如支付模块的PaymentService雏形）‌。‌代码补全‌：输入注释//JWT验证中间件，生成OAuth2.0
  • 【Linux内核模块】Linux内核模块简介 byte轻骑兵 #嵌入式Linux驱动开发实战linuxarm开发运维
    你是否好奇过，为什么Linux系统可以在不重启的情况下支持新硬件？为什么修改一个驱动程序不需要重新编译整个内核？这一切都离不开Linux的"模块化魔法"——内核模块（KernelModule）。作为Linux内核最灵活的特性之一，内核模块让开发者可以动态扩展内核功能，今天就来揭开这个神秘组件的面纱。目录一、什么是内核模块？1.1先打个比方：给内核装"插件"1.2技术定义：动态加载的内核代码段1.3
  • android中百度定位、城市选择列表，右侧字母展示
    好久好久没光顾过自己空空的博客了，做项目的时候都是逛着别人的博客急着把功能实现，近来闲下来了总结总结。这个城市选择功能也是当时做项目急着实现从哪找来的框架不记得了，然后改改用到项目中来的。非常感谢提供最初源码的博主，主要的区别是添加了搜索功能、定位功能，把以前的操作本地数据库sqlite的部分，改为操作对assest文件的操作，封装的有百度地图定位方法、可删除的edittext。百度地图的key需
  • iOS线程安全数组
    iOS-SDK只提供了非线程安全的数组。如果要多线程并发的使用一个数组对象就必须要加锁，平凡的加锁使得代码的调用非常的麻烦。我们需要多线程的读写锁在类的内部实现，所以需要对NSMutableArray进行封装，封装后的对象负责接受所有事件并将其转发给真正的NSMutableArrayiOS-SDK只提供了非线程安全的数组。如果要多线程并发的使用一个数组对象就必须要加锁，平凡的加锁使得代码的调用非常
  • 【Android】安卓四大组件之内容提供者（ContentProvider）：从基础到进阶 m0_59734531 AndroidandroidJavaContentProvider安卓四大组件
    你手机里的通讯录，存储了所有联系人的信息。如果你想把这些联系人信息分享给其他App，就可以通过ContentProvider来实现。。一、什么是ContentProvider‌ContentProvider‌是Android四大组件之一，负责实现‌跨应用程序的数据共享与访问‌，通过统一接口封装数据存储细节，提供标准化操作方式。其中主要功能包括：数据抽象层：将应用内部的数据（如SQLite数据库、文
  • 技术演进中的开发沉思-32 MFC系列：生命周期 chilavert318 熬之滴水穿石windowsc++
    今天，我们继续MFC以一种更亲近的方式，梳理这个框架的脉络，看看一个MFC程序从诞生到运行的完整故事。一、MFC类层次结构昨天已经梳理过MFC的类层次了，今天梳理其生命周期，还是要提一下。因为它确实很重要，如果把MFC比作一个庞大的家族，那类层次结构就是它的族谱。最顶层的CObject就像家族的老祖宗，所有成员都流淌着它的血液——封装了最基础的功能，比如对象的创建与销毁、序列化等。往下分，就像家族
  • 多态与虚函数详解 tkevinjd c++开发语言多态虚函数
    多态（Polymorphism）是面向对象编程（OOP）的三大特性之一（另外两个是封装和继承）。多态的意思是“多种形态”，它允许不同的对象对同一消息作出不同的响应。简单来说，多态是指通过统一的接口调用不同的实现。1.多态的核心思想多态的核心思想是：同一操作作用于不同的对象，可以有不同的解释，产生不同的结果。例如，动物都会“叫”，但不同的动物（如猫、狗）的叫声是不同的。通过多态，我们可以用统一的“叫
  • C++中的智能指针
    智能指针是C++中用于自动化管理动态内存的类模板，通过封装原生指针，并利用RAII（资源获取即初始化）技术，确保内存的自动释放，从而避免内存泄漏和悬空指针问题。它是现代C++内存管理的核心工具之一。原生指针的缺陷：1.内存泄漏：忘记调用delete2.悬空指针：释放后仍访问指针3.重复释放：同一内存被多次delete智能指针的优势：1.自动释放内存，不需手动delete，超出作用域自动释放2.防止
  • 封装一个有最小化的dialog组件 嘉琪001 javascript前端css
    {{title}}最小化关闭温馨提示：当您开启医学白板并最小化界面时，离会前先关闭白板（观看者无需操作）。{{title}}import{ElMessageBox}from'element-plus'import{defineComponent,ref,watch}from'vue'exportdefaultdefineComponent({name:'CustomDialog',props:{v
  • 前端面试题——手写实现 ajax 阿水爱踢中锋 ajaxjs前端
    凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封
  • 主板基础知识 bcbobo21cn 硬件主板
    主板，又叫主机板（mainboard）、系统板（systemboard）、或母板（motherboard），是计算机最基本的同时也是最重要的部件之一。主板一般为矩形电路板，上面安装了组成计算机的主要电路系统，一般有BIOS芯片、I/O控制芯片、键盘和面板控制开关接口、指示灯插接件、扩充插槽、主板及插卡的直流电源供电接插件等元件。主板制造质量的高低，决定了硬件系统的稳定性。主板与CPU关系密切，每一
  • JQ+vue实现图片拼接（无限套娃版） 小周同学: jsvuejqueryvue.jsjavascriptjquery
    css样式/*css初始化*/*{margin:0;padding:0;}/*去掉li的小圆点*/li{list-style:none;}/*去掉a的下划线*/a{text-decoration:none;}/*搜索框去除边框*/input,button,select{border:0;/*设置背景颜色为透明*/background-color:transparent;/*去掉外轮廓*/outli
  • 微信助手插件功能七十四：空格快速换行 杨利杰YJlio #微信助手微信
    微信助手插件功能七十四：空格快速换行微信助手插件功能七十四：空格快速换行功能介绍✅功能亮点️使用方法示例场景使用建议注意事项微信助手插件功能七十四：空格快速换行⚠️免责声明：本插件仅供学习与研究用途，不用于商业或非法用途。使用插件可能导致微信账号被封，相关后果需由使用者自行承担。插件下载后请在24小时内删除！功能介绍在微信聊天过程中，很多用户想在一条消息中分段输入（比如写多句文案），但系统默认按下
  • uniapp 如何封装实现任意页面都能使用的全局弹窗 代码简单说 2025开发必备(限时特惠)uni-appvue.jsjavascriptuniapp全局弹窗uniapp弹窗组件
    【实战干货】uniapp如何封装实现任意页面都能使用的全局弹窗标签：uniapp弹窗组件全局弹窗Vue动态渲染跨页面弹窗✨前端老司机亲授，uniapp无法在所有页面中直接用自定义弹窗？别急，一招动态挂载vue实例，优雅解决！背景故事：一个被“弹窗”搞崩溃的早晨作为一名前端开发工程师，有一天我在给uniapp项目加IM消息功能，需求是：不论当前用户在哪个页面，只要有消息来，就要立即弹出提示窗口。听起
  • uniApp实战五：自定义组件实现便捷选择 博主逸尘 uniApp实战uniAppvue3快速选择
    文章目录1.最终效果预览2.快速选择组件封装3.弹框组件封装4.组件逻辑实现5.组件样式6.页面引入1.最终效果预览2.快速选择组件封装{{title}}{{content}}基于uv-ui的行组件实现的快速选择，默认展示前三个值3.弹框组件封装请选择{{item.name}}确定取消这两个放一个页面了，没必要再单独封装一个弹框组件了4.组件逻辑实现import{defineProps,defin
  • BOOT_KEY按键（学习笔记） 小高Baby@ 学习笔记
    先来让我们了解一下GPIO是什么吧，它在单片机中也有很重要的作用，接下来我们来看看吧。esp32C3是QFN32封装（一种集成电路（IC）封装类型），GPIO引脚一共有22个，从GPIO-0到GPIO-21。从理论上来说，所有的IO引脚都可以复用为任何外设功能，但有些引脚用作连接芯片内部FLASH或者外部FLASH功能时，官方不建议用作其它用途。esp32c3的GPIO，可以用作输入、输出，可以配
  • uniapp项目如何优雅处理Token失效自动重试 token无感刷新 代码简单说 2025开发必备(限时特惠)uni-appuniapptoken重试uniapptoken获取token无感刷新uniapp自动刷新token前端登录状态管理token自动刷新
    uniapp项目如何优雅处理Token失效自动重试token无感刷新标签：uniapp｜前端登录状态管理｜Token自动刷新｜前端重试队列作为一名前端开发，我在重构公司旧项目时，踩到了一个大家经常遇到的坑：Token失效后请求失败，用户体验极差。而更糟糕的是，在一个页面里多个请求同时发出，全部失败并跳转登录，场面就像是“弹窗地狱”。我决定把这个问题解决到底，封装出一个可复用、稳定、自动重试的请求模
  • 【赵渝强老师】基于PostgreSQL的分布式数据库：Citus
    由于PostgreSQL具有强大的功能和良好的可扩展性，因此基于PostgreSQL很容易就可以实现分布式架构。Citus便是具体的一种实现方式。它以扩展的插件形式与PostgreSQL进行集成，且独立于PostgreSQL内核，部署也比较简单。Citus是现在非常流行的基于PostgreSQL的分布式解决方案。一、Citus基础下面是百度百科中对分布式数据库的定义：分布式数据库系统通常使用较小的
  • Android 插件化实现原理详解 小李飞飞砖 android
    Android插件化实现原理详解插件化技术是Android开发中一项重要的高级技术，它允许应用动态加载和执行未安装的APK模块。以下是插件化技术的核心实现原理和关键技术点：一、插件化核心思想宿主与插件：宿主(Host)：主应用APK，提供运行环境插件(Plugin)：未安装的APK/DEX/JAR，提供扩展功能核心目标：动态加载代码资源隔离与共享组件生命周期管理二、关键技术实现1.类加载机制(1)
  • SQL Server通过存储过程实现企业微信消息卡片推送 Favor_Yang SQL调优及高级SQL语法编写数据库企业微信SQLServer消息推送
    背景与需求分析企业微信消息卡片广泛应用于企业内部系统通知（如审批流提醒、工单状态变更、数据监控报警）。SQLServer存储过程因其高效执行、业务逻辑封装能力，成为处理数据库触发式消息推送的理想选择。技术整合的核心价值在于将数据库业务事件直接转化为企业微信消息，减少人工干预，提升流程自动化水平。技术架构设计系统采用三层架构：数据层：SQLServer存储过程处理业务数据并生成消息内容传输层：通过O
  • UnrealEngine5游戏引擎实践（C++) KENYCHEN奉孝 C++服务器c++游戏引擎
    目录目录目录UnrealEngine是什么？UnrealEngine5简介核心技术特性应用场景扩展兼容性与生态系统UnrealEngine安装下载EpicGamesLauncher启动UnrealEngine选择安装版本和路径选择组件开始安装验证安装配置项目模板（可选）更新和插件管理UE游戏引擎动作捕捉与动画系统程序化生成与AI技术物理与破坏系统音频与本地化技术性能优化导入静态网格体材质实例创建与
  • 开源 Arkts 鸿蒙应用 开发（六）数据持久--文件和首选项存储
    文章的目的为了记录使用Arkts进行Harmonyapp开发学习的经历。本职为嵌入式软件开发，公司安排开发app，临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。相关链接：开源Arkts鸿蒙应用开发（一）工程文件分析-CSDN博客开源Arkts鸿蒙应用开发（二）封装库.har制作和应用-CSDN博客开源Arkts鸿蒙应用开发（三）Arkts的介绍-CSDN博客开源Ark
  • SpringMVC中的常用注解
    SpringMVC中使用servlet的对象：(Request,Response,Session,Cookie)springmvc已经帮我们封装好了这些对象，只需在方法参数上使用所需要的对象即可@ControllerpublicclassServletController{/***只要在控制器方法上加入request，response，session类型的参数，springmvc框架会把这些对象准
  • iOS http封装 374016526 ios服务器交互http网络请求
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
      那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
  • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
  • Informatica参数及变量 18289753290 Informatica参数变量
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
  • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
  • Hibernate的总结 永夜-极光 Hibernate
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
  • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
  • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
  • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
    创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
  • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
  • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
    一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
  • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
    1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
  • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
  • 提高职业素养，做好人生规划 白糖_ 人生
      培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
  • 国外的网站你都到哪边看？ bozch 技术网站国外
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
  • 编程之美-光影切割问题 bylijinnan 编程之美
    package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
  • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
            现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
  • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
    The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
  • 关于 CAS SSO 文章声明 denger SSO
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
  • 初二上学期难记单词 dcj3sjt126com englishword
    lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
  • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
    #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
  • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
    /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
  • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
    页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
  • spring中少用的注解@primary解析 jackyrong primary
    这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
  • Java几款性能分析工具的对比 lbwahoo java
    Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
  • JVM参数配置大全 nickys jvm应用服务器
    JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
  • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
    （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
  • Spring缓存注解@Cache使用 tom_seed spring
    参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他