Sroot
Sroot

简单实现骨架屏 （Skeleton Screens）

      近年，国内外各大网站都引入骨架屏（Skeleton Screens）技术来提高用户体验。相比于之前的Loading动画，骨架屏页面更容易让用户产生一种错觉，页面快加载完了。骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。
     PS：骨架屏占位应用最早可以追溯到图片懒加载。
     
     实现骨架屏方式很多，以下是web端最简单实现骨架屏的方式。 
DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://cdn.bootcss.com/weui/2.1.2/style/weui.min.css" rel="stylesheet" />
    <title>Skeletonstitle>
    <style>
      img {
        width: 100%;
      }
      .media-box-img {
        width: 60px;
        height: 60px;
      }
      /* 阻止Skeletons点击事件 */
      .pointer-stop {
        pointer-events: none;
      }
      /* Skeletons效果 */
      .skeletons {
        position: relative;
        display: block;
        overflow: hidden;
        height: 100%;
        min-height: 20px;
        background-color: #ededed;
      }
      .skeletons:empty::after {
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.753), transparent);
        -webkit-animation: loading 1.5s infinite;
        animation: loading 1.5s infinite;
      }
      @-webkit-keyframes loading {
        100% {
          -webkit-transform: translateX(100%);
          transform: translateX(100%);
        }
      }
      @keyframes loading {
        100% {
          -webkit-transform: translateX(100%);
          transform: translateX(100%);
        }
      }
    style>
  head>
  <body>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__hd">
        <span class="weui-panel-title skeletons">span>
      div>
      <div class="weui-panel__bd">
        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg pointer-stop">
          <div class="weui-media-box__hd">
            <div class="media-box-img skeletons">div>
          div>
          <div class="weui-media-box__bd">
            <div class="weui-media-box__title skeletons">div>
            <p class="weui-media-box__desc">
              <span class="media-box-desc skeletons">span>
            p>
          div>
        a>
      div>
    div>
    <script>
      function renderCard() {
        var cardImage = document.querySelector('.weui-panel-title')
        cardImage.textContent = '标题'
        cardImage.classList.remove('skeletons')
        var listData = [
          {
            img:
              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==',
            desc: '内容内容内容内容'
          }
        ]
        var html = ''
        var cardImage1 = document.querySelectorAll('.media-box-img')
        var cardImage2 = document.querySelectorAll('.weui-media-box')
        var cardImage3 = document.querySelectorAll('.weui-media-box__title')
        var cardImage4 = document.querySelectorAll('.media-box-desc')
        for (var i = 0; i < listData.length; i++) {
          cardImage2[i].classList.remove('pointer-stop')
          cardImage1[i].classList.remove('skeletons')
          cardImage3[i].classList.remove('skeletons')
          cardImage4[i].classList.remove('skeletons')
          cardImage1[i].innerHTML = ""
          cardImage3[i].innerHTML = '一段标题'
          cardImage4[i].innerHTML = '一段描述'
        }
      }
      setTimeout(function() {
        renderCard()
      }, 4000)
    script>
  body>
html>
 
优点
让应用程序感觉更有表现力，吸引更多的注意力。
内容还在加载中，用户也可以自由地滚动并与应用程序交互。
PS：个人观点，不认为这是一种优势，反而会容易发生数据交互的错误。
 
缺点
增加程序运行负担，无法根本解决页面加载性能问题。
开发工作量大，对特定页面数据额外绘制动画效果。

 

 

总结：骨架屏适用一些固定位置元素，不适用于一些动态位置元素。（比如：列表渲染数据） 建议采用Loading动画+懒/预加载技术提高用户体验与性能。
           经观察，大多数网站动态数据的骨架渲染也就渲染成一条。个人猜测，列表渲染之所以渲染一条，多条不合适。假设骨架屏渲染三条占位元素，结果数据返回一条数据，那就尴尬了。
 

你可能感兴趣的:(简单实现骨架屏 （Skeleton Screens）)

  • 微信小程序——扫码功能简单实现 mon_star° 智慧门店小程序
    微信小程序中二维码扫描的简单实现，很容易的。首先在.wxml写一个text组件，通过点击这个text来实现扫码功能。{{scanCode}}bindtap是给text绑定的点击事件；{{scanCode}}给这个text赋值，赋值的数据在.js文件的data里初始化。.js文件Page({/***页面的初始数据*/data:{scanCode:'扫码',},/***生命周期函数--监听页面加载*/
  • C++ --- list的简单实现
    list的简单实现前言一、节点类二、迭代器类三、list类四、迭代器类的相关运算符重载1.解引用操作符2.成员访问操作符3.前置后置++/--4.==/!=运算符五、list类的相关构造和方法1.迭代器相关2.空初始化方法3.构造，析构函数相关4.赋值运算符重载5.尾插，头插，任意位置插6.尾删，头删，任意位置删除7.清空8.size方法六、总结前言本次实现的list结构是带头双向循环链表，节点结
  • Webpack 简版手写 aiguangyuan 前端开发Webpack
    本文将以Webpack5为例，通过简单实现，整体介绍一下Wwebpack构建过程与实现细节。1.项目结构simple-webpack├──dist├──src│├──index.js│├──module1.js│└──module2.js├──loaders│├──babelLoader.js│└──exampleLoader.js├──plugins│└──examplePlugin.js├──
  • spring boot中使用easyexcel简单实现导出功能
    导入依赖com.alibabaeasyexcel3.1.1建立excel表格所需数据类（载入excel表的数据）ExcelProperty可定义列名，位置等属性@Data@ExcelIgnoreUnannotatedpublicclassOrderListResp{/***用户id*/@ApiModelProperty("用户id")//value代表列名，index为表格列序号，此代表列名为用户
  • JWT认证授权原理和简单实现 风铃喵游 node
    1.关于JWT:(1).JWT(jsonwebtoken)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(2).JWT的声明一般被用于在身份提供者和服务提供者之间传递被认证的用户身份信息，以便于从资源服务器获取资源。最为常见的场景就是用户登录认证(3).因为数字签名的存在，这些信息是可信的，JWT可以使用HMAC算法或者是RSA的公私密钥对进行签名2.主要的应用场景:(1).身份
  • nonorepo+turbo实现多项目管理 k0933 记录vue.js前端
    运行命令pnpminstallpnpmrundevpnpmrunbuild:pcpnpmrunbuild:h5参考1、Monorepo多项目管理不再难！从零开始：pnpmworkspace手把手教你打造灵活、可扩展的开发环境2、monorepo的理解以及简单实现
  • 【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】 2401_84433535 前端vue.jsexcel
    ### 配合后端的两个方法 因为上面的纯前端写法有一个问题，就是有分页的时候我们没法拿到数据。或者数据太大了我们下载实在是有点慢和卡。所以基本上工作中都是后端生成下载链接导出的。这里再分享两个方法。1,[a标签](https://bbs.csdn.net/topics/618166371)下载这种方法核心就是后端直接生成下载链接，前端只需要生成A标签然后下载就行了。较为常用的一个daochu(){
  • MySQL与python联合练习（设计学生管理系统） 从以前 数据库pythonmysqlpython数据库
    以下是使用Python结合Flask（用于构建Web应用）和SQLAlchemy（用于数据库操作）来简单实现上述学生管理系统部分核心功能的示例代码。注意，这只是一个基础示例，实际应用中可能需要更多的完善、错误处理以及拓展功能，并且需要提前安装好flask和sqlalchemy库（可通过pipinstallflasksqlalchemy命令安装）。1.项目结构搭建创建如下基本的项目文件夹结构：stu
  • Android github 快速实现多人协作 weixin_34037977 移动开发
    前言：最近要做github多人协作，也就是多人开发。搜索了一些资料，千篇一律，而且操作麻烦。今天就整理一下，github多人协作的简单实现方法。下面的教程不会出现：公钥、组织、team、pullrequest1、首先小张在github上创建一个仓库，比如叫做：GlideDemo2、小张开始邀请小王创建仓库后，然后开始添加小王了。注意在第三步的时候，要输入小王的github用户名。3、小王接收小张的
  • 不用vue,只用html,即可简单实现electron项目 豆豆（前端开发+ui设计） electronjavascript前端
    为你提供一个最简单的Electron项目模板，包含完整的代码、配置和打包说明。即使你是小白，也能快速上手。1.项目结构/your-project├──main.js#Electron主进程文件├──preload.js#安全通信脚本（可选）├──index.html#前端页面├──package.json#项目配置└──build/#打包配置目录（后文会生成）2.初始化项目在空文件夹中打开终端，执
  • C++ --- vector的简单实现 爱学习的小邓同学 C++c++开发语言
    vector的简单实现引言一、默认成员函数1.构造函数1.1默认构造函数1.2初始化列表构造1.3迭代器区间构造1.4n个val构造2.拷贝构造函数3.析构函数4.运算符重载4.1operator=4.2operator[]二、遍历方式1.下标+[]2.迭代器3.范围for三、增删改查1.reserve()2.resize()3.push_back()4.pop_back()5.insert()6
  • 在 SpringBoot 项目简单实现一个 Jar 包加密，防止反编译 Java布道者 springbootjarpython
    在现实场景中，某金融公司开发了一个基于SpringBoot的应用程序，该程序用于处理金融数据，具有高敏感性。为了防止该程序的核心代码（如数据加密、交易算法等）被反编译或篡改，公司希望通过加密JAR包并在运行时解密的方式来保护核心代码。为实现这个需求，我们设计了一个简单的加密和解密方案，其中：使用对称加密算法（AES）加密JAR文件。在程序启动时动态解密JAR文件，并加载解密后的类。将解密密钥存储在
  • RPC-BDY(1)-一个最简单RPC实现 Hash.. rpc网络协议网络
    RPC-BDY(1)-2022.7.11byBDY文章目录RPC-BDY(1)前言一、什么是RPC？1.RPC定义2.RPC组成部分二、一个最简单RPC实现1.通用接口实现2.传输协议3.客户端实现-动态代理**4.服务端实现-反射调用**5.测试三、最简单实现用到的知识1.泛型2.动态代理3.对象流与序列化4.java反射总结前言这次RPC实战是根据声哥的手写RPC博客来学习RPC基本内容结构类
  • 简单实现HTML在线编辑器 小飞大王666 html编辑器前端
    我们继续来看一下如何开发一个简单的html在线编辑器，要求很简单能够同时编辑html，css，js代码，并且运行之后可以同时预览效果一：前置知识在H5中设置了一个新的标签，，用于在当前HTML文档中嵌入另一个独立的HTML文档。这是实现在线编辑器预览功能的关键，因为它提供了一个沙箱环境，内部的HTML、CSS、JS不会直接影响到父页面。所以我们来简单学习一下该标签元素的使用。（1）核心属性和方法(
  • 17 - ExternalAttention模块 Leo Chaw 深度学习算法实现pytorchpython人工智能深度学习
    论文《BeyondSelf-attention:ExternalAttentionusingTwoLinearLayersforVisualTasks》1、作用本文提出了一种新颖的注意力机制——外部注意力（ExternalAttention），通过使用两个外部小型可学习的共享内存来实现。这种机制能够用两个连续的线性层和两个归一化层简单实现，并且可以方便地替换现有流行架构中的自注意力机制。外部注意力
  • Java Kafka消费者简单实现 MichaelLee826 JavaJavaKafka
    用Java实现的一个简单的Kafka消费者：importorg.apache.kafka.clients.consumer.ConsumerRecord;importorg.apache.kafka.clients.consumer.ConsumerRecords;importorg.apache.kafka.clients.consumer.KafkaConsumer;importjava.ti
  • 商城前端资源过载，性能差，该如何优化？ 万米商云 前端
    针对商城前端资源过载和性能瓶颈问题，可能的优化点包括：1、资源加载优化：除了Webpack的分包，还可以考虑图片压缩、懒加载，使用CDN分发静态资源，减少第三方库的体积，比如按需加载组件库。2、渲染优化：减少重排重绘，使用虚拟滚动优化长列表，骨架屏提升用户体验，服务端渲染或静态生成（如Next.js或Nuxt.js）来加快首屏加载。3、网络传输优化：开启Gzip/Brotli压缩，利用HTTP/2
  • JWT使用 hqxstudying java开发语言jwt
    JWT基础概念JWT（JSONWebToken）是一种基于JSON的开放标准（RFC7519），用于在网络应用间安全地传输声明。一个JWT由三部分组成：头部（Header）、载荷（Payload）和签名（Signature），通常格式为Header.Payload.Signature。Java中JWT的简单实现以下是一个简单的JavaJWT实现示例，使用了NimbusJOSE+JWT库：impor
  • 基于 STM32 的四路 PWM 控制智能小车运动的模块化控制程序 平凡灵感码头 stm32项目实现stm32单片机嵌入式硬件
    今天简单实现一下，智能小车的运动模块程序.实现小车的前进，后退，转向，就是通过电机IO口输出PWM，控制电机转速，实现上述功能.主函数#include "stm32f10x.h"          //Deviceheader#include "Delay.h"#include "car.h"#include "Key.h"uint8_t i;int main(void){robot_Init()
  • 6个月Python学习计划 Day 16 - 迭代器、生成器表达式、装饰器入门 蓝婷儿 pythonpython学习开发语言
    第三周Day2今日目标理解生成器表达式与列表推导的差异掌握迭代器的本质与自定义迭代器类初识装饰器（Decorator）的概念与简单实现为后续“爬虫&Web开发”模块打好函数封装与复用的基础生成器表达式（GeneratorExpression）生成器表达式语法类似列表推导式，但使用的是()而不是[]，返回的是生成器对象，具有惰性计算的特点。✅示例：gen=(x**2forxinrange(5))pr
  • 微信小程序骨架屏动画：提升用户等待体验 小程序开发2020 微信小程序notepad++小程序ai
    微信小程序骨架屏动画：提升用户等待体验关键词：微信小程序、骨架屏动画、用户等待体验、性能优化、加载效果摘要：本文围绕微信小程序骨架屏动画展开，深入探讨其对提升用户等待体验的重要性。首先介绍了骨架屏动画的背景知识，包括目的、预期读者和文档结构等。接着详细解释了骨架屏动画的核心概念，通过生活实例让读者轻松理解。然后阐述了其核心算法原理、数学模型，并给出具体操作步骤和代码实例。还介绍了实际应用场景、相关
  • 【Android】双指旋转手势 风起云涌~ android
    一，概述本文参考android.view.ScaleGestureDetector，对双指旋转手势做了一层封装，采用了向量计算法简单实现，笔者在此分享下。二，实例如下，使用RotateGestureDetector即可委托，实现旋转手势的简单封装，在对应Callback获取到旋转值设置到View即可。publicclassRectViewextendsFrameLayout{privatestat
  • Python-协程 Kusunoki_D 操作系统Pythonpython协程
    目录一、迭代器与生成器1.可迭代对象Iterable1）定义2）判断可否为迭代对象2.迭代器Iterator1）定义2）判断是否为迭代器3）实现迭代器4）for循环的本质5）利用迭代器实现斐波那契数列3.生成器generator1）()创建生成器2）yield创建生成器3）send()函数唤醒（了解）4.可迭代对象、迭代器、生成器对比二、协程Coroutine1.简单实现协程2.greenlet模
  • PoS算法 Eighteen__ 共识算法算法区块链PoS共识算法
    文章目录前言一、PoS——权益证明二、go语言简单实现前言提示：以下是本篇文章正文内容，下面案例可供参考一、PoS——权益证明PoS是什么⚫PoS（ProofofStake）译为权益证明，是一种在公链中的共识算法，可作为PoW算法的一种替换⚫基于权益证明的数字货币中，下一个区块的选择是根据不同节点的股份和时间进行随机选择的PoS解决的问题⚫PoS的设计理念，来自于对比特币危机的思考，比特币的区块产
  • SpringBoot结合RabbitMQ简单实现订单延迟取消 weixin_43873050 rabbitmqspringbootjava
    参考了这位大佬的博客，详细看这里springboot整合RabbitMQ实现延时自动取消订单1.导入jar包org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-amqporg.projectlomboklombok1.18.10provided2.配置applicati
  • JVM—垃圾收集算法和HotSpot算法实现细节 ytttr873 jvm算法
    Java虚拟机（JVM）的垃圾收集机制是Java应用程序性能和稳定性的关键组成部分。JVM通过多种垃圾收集算法和技术来管理内存，确保系统高效运行。本文将深入探讨JVM的垃圾收集算法及其在HotSpot虚拟机中的实现细节。一、垃圾收集算法1.标记-清除算法（Mark-Sweep）步骤：标记阶段：遍历所有可达对象并标记。清除阶段：清除所有未标记的对象，释放内存。优点：简单实现。缺点：空间碎片化。清除阶
  • 模块二：C++核心能力进阶（5篇） 篇一：《STL源码剖析：vector扩容策略与迭代器失效》 AI迅剑 c++开发语言
    一、前言：重新认识vector的复杂性在C++开发者中，std::vector常被视为"动态数组"的简单实现，但其底层机制实则蕴含着深刻的工程智慧。本篇将通过：多维度源码剖析（GCC/Clang/MSVC三平台实现对比）数学建模分析（时间复杂度与空间局部性）实战工程优化（手写vector的12个关键实现细节）性能攻防实战（百万级数据压力测试）揭示现代C++容器设计的核心思想。二、vector内存管
  • Linux进程间通信的几种方法-半双工管道，命名管道，消息队列 顾晓伟 Learnlinuxstringstruct测试pathcmd
    1、半双工管道简单实现半双工管道可以实现父进程和子进程之间或者子进程之间（前提是有共同的祖先）的通信因为是半双工，所以两端不可能同时读取，而是一端读一端取，而且当一端分配到读任务后，那么他就固定了，不能再担当写的角色了，相反亦然。测试程序如下：#include#include#include#include#includeintmain(void){intfd[2],nbytes;pid_tchi
  • 算法 —— 十大排序算法 四谷夕雨 排序算法算法数据结构
    文章目录1.冒泡排序2.选择排序3.插入排序4.希尔排序5.快速排序6.归并排序7.堆排序8.桶排序9.基数排序10.计数排序简要总结十大排序算法排序算法平均时间复杂度最坏时间复杂度空间复杂度稳定性适用场景冒泡排序O(n²)O(n²)O(1)稳定小数据量选择排序O(n²)O(n²)O(1)不稳定简单实现插入排序O(n²)O(n²)O(1)稳定部分有序希尔排序O(nlogn)O(n²)O(1)不稳定
  • SpringCloud简单实现注册中心、服务提供者、服务消费者 试行 springcloudspring后端
    创建一个Maven的SpringCloud项目命名为：eurekaserver注册中心pom.xml代码：4.0.0org.exampleeurekaserver1.0-SNAPSHOTeurekaserverorg.springframework.bootspring-boot-starter-parent2.7.12DemoprojectforSpringBoot1.82.7.122.1.3-
  • 异常的核心类Throwable 无量 java源码异常处理exception
    java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu;
  • mongoDB 游标（cursor） 实现分页 迭代 开窍的石头 mongodb
    上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询      如何声明一个游标        var mycursor = db.user.find({_id:{$lte:5}});       迭代显示游标数
  • MySQL数据库INNODB 表损坏修复处理过程 0624chenhong tomcatmysql
    最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -
  • 剖析如何与设计人员沟通 不懂事的小屁孩 工作
    最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 那应该如何与设计人员沟通呢？ 我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，
  • qq空间刷评论工具 换个号韩国红果果 JavaScript
    var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l
  • S2SH整合之session 灵静志远 springAOPstrutssession
    错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
  • xmp标签 a-john 标签
    今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr"><span class="user-name">' + user + '</span>' + text + '</div></li>'; ulComme
  • Ajax的常用技巧（2）---实现Web页面中的级联菜单 aijuans Ajax
    在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
  • 天-安-门，好高 atongyeye 情感
        我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。     晚上躺在床上一个人想了很久，很久。        我生在农
  • android 动画 百合不是茶 android透明度平移缩放旋转
    android的动画有两种  tween动画和Frame动画   tween动画;,透明度,缩放,旋转,平移效果   Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation
  • 查看本机网络信息的cmd脚本 bijian1013 cmd
    @echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\
  • plsql 清除登录过的用户 征客丶 plsql
    tools---preferences----logon history---history  把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一起进步。 email ： binary_spac
  • 【Pig一】Pig入门 bit1129 pig
    Pig安装 1.下载pig   wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz   2. 解压配置环境变量      如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量   expor
  • Java 线程同步几种方式 BlueSkator volatilesynchronizedThredLocalReenTranLockConcurrent
    为何要使用同步？      java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），      将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，      从而保证了该变量的唯一性和准确性。 1.同步方法&
  • StringUtils判断字符串是否为空的方法（转帖） BreakingBad nullStringUtils“”
    转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html   public static boolean isEmpty(String str)   　　判断某字符串是否为空，为空的标准是 str== null  或 str.length()== 0  
  • 编程之美-分层遍历二叉树 bylijinnan java数据结构算法编程之美
    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美 分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要
  • jquery取值和ajax提交复习记录 chengxuyuancsdn jquery取值ajax提交
    // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("
  • 推荐国产工作流引擎嵌入式公式语法解析器-IK Expression comsci java应用服务器工作Excel嵌入式
    这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言
  • 关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer daizj spring
    1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q
  • 二叉树:二叉搜索树 dieslrae 二叉树
        所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码:
  • C语言字符串函数大全 dcj3sjt126com cfunction
    C语言字符串函数大全     函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例:   #include <stdio.h> #include <string.h>   int main
  • 友盟统计页面技巧 dcj3sjt126com 技巧
    在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];
  • window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 flyvszhb javajdk
    window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo
  • Java在创建子类对象的同时会不会创建父类对象 happyqing java创建子类对象父类对象
      1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象，   2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
  • 跟我学spring3 目录贴及电子书下载 jinnianshilongnian spring
        一、《跟我学spring3》电子书下载地址： 《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf     跟我学spring3系列 word原版 下载     二、 源代码下载 最新依
  • 第12章 Ajax（上） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • BI and EIM 4.0 at a glance blueoxygen BO
    http://www.sap.com/corporate-en/press.epx?PressID=14787   有机会研究下EIM家族的两个新产品~~~~   New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing –
  • Java线程中yield与join方法的区别 tomcat_oracle java
    长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb
  • android Manifest.xml选项 阿尔萨斯 Manifest
    结构 继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组 构造函数 public Manifest () 详细 androi
  • Oracle实现类split函数的方 zhaoshijie oracle
    关键字：Oracle实现类split函数的方 项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他