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）)

  • Unity 热更 之 【HybirdCLR】+【YooAsset】 [安卓 Android端] [代码 + 资源热更] 功能的 简单实现演示 仙魁XAN Unity进阶unityHybirdCLRYooAssetHotUpdate热更新
    Unity热更之【HybirdCLR】+【YooAsset】[安卓Android端][代码+资源热更]功能的简单实现演示目录Unity热更之【HybirdCLR】+【YooAsset】[安卓Android端][代码+资源热更]功能的简单实现演示一、简单介绍二、HybridCLR三、YooAsset四、HybirdCLR引入工程五、YooAsset引入工程六、Python服务器简单构建七、Hybir
  • 甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态 界面开发小八哥 甘特图uiDHTMLX项目管理javascript
    DHTMLXGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。在现代Web应用程序中，在页面重新加载之间保持UI元素的状态对于流畅的用户体验至关重要。在本教程中我们将知道您完成DHTMLXGantt中持久UI的简单实现，重点关注一小部分特性——即任务的展开或折叠分支，以及选定的甘特图缩放级别。您将了解如何将这些设置存储在浏
  • Koa2——洋葱模型，简单实现 三千数优一 javascript1024程序员节
    classapp{middleware=[];//装载中间件use(middleware){this.middleware.push(middleware);}compose(callback){//把要被触发的上一层洋葱壳作为下一层洋葱壳的next入参传入。//reducer的返回值，也就是下一层的next为()=>fn(next)。constreducer=(next,fn)=>()=>fn(
  • Python 实时语音识别 TEDxPY python学习python资源语音识别Python人工智能实时语音识别百度语音API
    Python实时语音识别语音识别语音识别API语音识别步骤效果展示代码下载最近自己想接触下语音识别，经过一番了解和摸索，实现了对语音识别API的简单调用，正好写文章记录下。目前搜到的帖子里，有现成的调用百度语音API来对音频文件进行识别的；也有通过谷歌语音服务来实现了实时语音识别的。由于我这谷歌语音一直调用不成功，就将二者结合，简单实现了通过百度语音API来进行实时语音识别。语音识别语音识别技术就
  • Unity 热更 之 【YooAsset 热更】Unity 可以进行热更的资源管理系统，并 【Android 端简单实现·案例热更】 仙魁XAN Unity进阶unityYooAssetyooAndroid热更
    Unity热更之【YooAsset热更】Unity可以进行热更的资源管理系统，并【Android端简单实现·案例热更】目录Unity热更之【YooAsset热更】Unity可以进行热更的资源管理系统，并【Android端简单实现·案例热更】一、简单介绍二、YooAsset引入工程三、Sample案例Android端热更四、Python服务器简单构建一、简单介绍Unity的资源管理系统不断发展，以适
  • 简单实现浮动按钮+上滑隐藏按钮+下滑显示按钮 AlanGe
    #import"SlideShowOrHideVC.h"@interfaceSlideShowOrHideVC(){CGFloatlastContentOffset;BOOLhideBtn;BOOLisBottom;}@property(nonatomic,strong)UITableView*tableView;@property(nonatomic,strong)UIButton*myButt
  • 实践-python简单实现参数估计 HenlyX
    作业：https://mp.weixin.qq.com/s/8egc4QE6MmME0AS4FKSlOg下面动手实践主要是借鉴：https://blog.csdn.net/polarislove36/article/details/78922045?utm_source=blogxgwz4https://blog.csdn.net/maplepiece1999/article/details/10
  • Spring Boot 3使用Spring WebFlux + WebSocket(简单实现) 丿凌潇 springspringbootwebsocket
    效果为什么要使用SpringWebFlux？一部分答案是需要一个非阻塞的网络堆栈来处理少量线程的并发，并使用更少的硬件资源进行扩展。使用Servlet非阻塞I/O，远离ServletAPI的其余部分，因为他们的通信是同步的(Filter,Servlet)或阻塞的(getParameter,getPart)。SpringWebFlux是一个新的通用API作为跨任何非阻塞运行时的基础的动机。这很重要，
  • CSS3换装达人原理 Jinuss CSScss3前端
    引言换装或者是换皮肤是常见的行为，我们可以先看下效果：选择不同的颜色，就可以秒变人物服装的颜色，原理其实非常简单实现步骤主要分为三步，即素材的提供、布局样式、动态控制图片提供提供两张图片，一张人物图片，一张除衣服外其余透明的图片布局和样式布局主要是元素的定位，两张图片的叠加，需要用到相对定位和绝对定位/**底图（人物）*/.person{width:256px;height:512px;backg
  • 【微服务】Etcd实现服务器注册和发现|Etcd、Eureka、Consul、Zookeeper 比较 bdview 分布式数据库大数据etcdpython
    目录Etcd、Eureka、Consul、Zookeeper的比较Etcd服务注册与发现的必要：etcd简介etcd分布式一致性算法etcd应用场景etcd安装服务注册与发现实例(go语言)服务注册的简单实现1：服务注册的简单实现2：都是key-value存储，redis可以代替etcd吗？为什么选择Etcd而不选择Zookeeper附录附录1:etcd基本使用(数据库CURD和持久化等)数据库操
  • PTA - C语言接口题集1 VIRGO_尽兴自在 （暑假题集）财经职业学院pta考试专本贯通c语言
    目录6-1求m到n之和6-2找两个数中最大者6-3符号函数6-4判断奇偶性6-5使用函数计算两点间的距离6-6使用函数求素数和6-7使用函数输出水仙花数6-8统计各位数字之和是5的数6-9简单实现x的n次方6-10函数判断闰年6-11移动字母6-12在数组中查找指定元素6-13数组循环右移6-14报数6-15删除字符6-16分类统计各类字符个数6-17结构体指针参数传递6-18计算两个复数之积6-
  • [ A*实现 ] C++，矩阵地图 Arik (IoT) 移动机器人路径规划路径规划
    参考文献：A*寻路算法C++简单实现（csdn.net）ROSpackageofAstaralgorithm(github.com)实现代码：https://gitee.com/upcgyl/astar.git存在问题：地图目前必须是可搜索到路径周围点寻找太过复杂OpenList和CloseList结构不统一导致查找函数需要写两个后续优化：思考二叉堆的实现方式优化地图输入区分linux端：增加Op
  • Java简单实现服务器客户端通信 蔚蓝星辰mic Javajava服务器开发语言socket
    目录Socket概述Socket通信模型Socket编程流程DEMO服务器端客户端在Java中实现服务器和客户端的通信，可以使用JavaSocket编程。Socket概述Socket指的是“插座”，是应用层与传输层之间的桥梁，用于在网络上进行双向通信。在Socket编程中，客户端与服务器之间的通信需要通过Socket进行实现。客户端通过Socket向服务器发送请求，服务器接收请求后返回响应，完成整
  • 23种设计模式之代理模式 記億揺晃着的那天 设计模式代理模式
    文章目录代理模式Spring中那些地方使用了代理模式代理的分类模版方法模式也能添加额外的功能，与代理模式有什么区别静态代理-简单实现jdk动态代理-简单实现Spring是如何实现jdk动态代理的cglib动态代理-简单实现Spring是如何实现cglib动态代理的jdk动态代理和cglib动态代理有什么区别Spring是如何选择jdk动态代理或者cglib动态代理的总结-静态代理、动态代理代理模式
  • STL容器中 vector（动态数组）的增删改查 Cici的信奥小站 c++开发语言
    C++标准模板库（STL）中的容器是编程中非常重要的部分，它们用于存储数据元素集合。以下是STL中最常用的容器vector动态数组的详细介绍：vector（动态数组）vector是一个能够存储任意类型对象的序列容器，可以动态地增长和缩小。它提供随机访问迭代器，因此可以高效地访问容器中的任意元素。以下是vector的C++代码简单实现：#include#includeusingnamespacest
  • 用C# WPF简单实现仪表控件 Dotnet9.com WPF自定义控件c#WPFC#WFP自定义控件仪表控件Gauge
    时间如流水，只能流去不流回！点赞再看，养成习惯，这是您给我创作的动力！本文Dotnet9https://dotnet9.com已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NETCore等，亦有C++桌面相关的QtQuick和QtWidgets等，只分享自己熟悉的、自己会的。阅读导航：一、先看效果二、本文背景三、代码实现四、文章参考五、代码下载一、先看效果二、本文背
  • zedboard——adau1761新工程的设备树修改（二） 夜风~ linuxzedboard开发板开发设备树adau1761pl.dtsi
    本文将介绍下对工程自动生成的设备树进行修改，加入adau1761设备相关的节点信息。在上一篇文章中，加载hdf文件后，使用petalinux-config指令后，会自动生成设备树文件，共如下图中6个设备树文件。设备树的知识总结见：https://www.cnblogs.com/tureno/articles/6399782.html（1）skeleton.dtsi/**Skeletondevice
  • Cesium的四种点击拾取方法 BJ-Giser cesium前端javascriptcesium
    Cesium的四种点击拾取方法1、viewer.scene.pick()通过坐标位置，拾取实体（Entity），图元（Primitive）,3DTiles对象，返回的是scene中指定位置最上层的对象。例如点击获取Entity的pick对象，通过pick.id可以拾取当前的entity对象。拾取后，可以用于改变对象的属性参数，如颜色，图片等。lethandler=newCesium.ScreenS
  • SGSH: Stimulate Large Language Models with Skeleton Heuristics for Knowledge Base Question UnknownBody LLMDailyKnowledgeGraph语言模型人工智能自然语言处理
    本文是LLM系列文章，针对《SGSH:StimulateLargeLanguageModelswithSkeletonHeuristicsforKnowledgeBaseQuestionGeneration》的翻译。SGSH：用骨架启发式方法模拟大型语言模型以生成知识库问题摘要1引言2Pilot研究3方法4实验5相关工作6结论摘要知识库问题生成（KBQG）旨在从知识库中提取的一组三元组事实中生成自
  • Springboot&Springcloud面试题(含代码及展示图) 套马杆的程序员
    1简单说一下springboot?SpringBoot是由Pivotal团队提供的全新框架，其设计目的是用来简化Spring应用的初始搭建以及开发过程。-使用springboot以后,搭建一个spring应用和开发，部署变得很简单.2怎么简单实现一个springboot应用1）新建maven项目2）让项目以spring-boot-starter-parent为父模块org.springframew
  • Vue+Websocket＜简单实现聊天功能＞ 黎明寄波澜* vuevue.jswebsocket前端
    此篇文章是针对Websocket的简单了解和应用，利用Nodejs简单搭建一个服务器加以实现。首先创建一个vue项目，会vue的我就不必多说了；然后再创建一个server文件夹，在终端上打开该文件夹，输入vueinit（一直敲"回车"键），最后再建一个server.js文件，如下图代码如下：server.js在server文件终端下npminstall--swsvaruserNum=0;//统计在
  • Java实现文本查重（相似度） 无三方工具版本 尽兴- 后端java开发语言
    功能背景：在业务记录逐渐增长的前提下，逐渐出现重复项目名称数据和重复内容数据，这些数据导致项目记录质量的下降。为了避免此中情况发生，考虑对关键数据信息进行查重校验，原计划采用第三方标准查重接口，但过程比较繁琐，需要商务对接等时间，所以暂时在自身系统中实现数据查重检验。当然，实现标准查重类似知网论文查重那种系统就太麻烦了，甚至可以独立出来一套系统了，所以就简单实现查重功能，针对名称和大文本内容实现查
  • 简单实现二维码扫描 lmm1217 记一下简单实现二维码扫描
    文章是我转载的哦，一片枫叶_刘超大神写的好棒，谢谢分享，原文地址http://blog.csdn.net/qq_23547831/article/details/52037710#reply本文将讲解一下我最近写的一个快速集成二维码扫描库，这里需要说明的是其核心的实现扫描的功能，是通过调用ZXing库实现的。内部App中使用到了二维码扫描功能，但是网上找了一些关于二维码扫描的例子，只是我在集成的时
  • 类的类装饰器简单实现思路及案例 LaoYuanPython 老猿PythonPython基础教程python装饰器编程语言程序人生程序设计
    ☞░前往老猿Python博客https://blog.csdn.net/LaoYuanPython░一、引言在《https://blog.csdn.net/LaoYuanPython/article/details/111303395：你不一定全知道的四种Python装饰器实现详解》介绍了Python装饰器的四种类型：函数的函数装饰器、类的函数装饰器、函数的类装饰器、类的类装饰器，并针对网上没有公
  • c++中list的简单实现 dabai__a C++c++listwindows数据结构推荐算法c语言链表
    文章目录list介绍节点类(listNode)__list__iterator(迭代器类)operator->list的成员函数empty_init()初始化节点list(list<)拷贝构造clear()清除链表~list()析构insert()插入erase()删除push_back()尾插push_front()头插pop_back()尾删pop_front()头删begin()头节点e
  • C语言-简单实现单片机中的malloc示例 Ch_champion #C/C++单片机嵌入式硬件
    概述在实际项目中，有些单片机资源紧缺，需要mallloc内存，库又没有自带malloc函数时，此时，就需要手动编写，在此做个笔录。（已在项目上使用），还可进入对齐管理机制。直接上源码1、mem_malloc.h文件#ifndef__MEM_MALLOC_H__#define__MEM_MALLOC_H__#ifdef__cplusplusextern"C"{#endif#includevoid*m
  • Mac 下 Python+Selenium 自动上传西瓜视频 .咖啡加剁椒 软件测试macospythonselenium功能测试软件测试自动化测试程序人生
    背景研究下Python+Selenium自动化测试框架，简单实现Mac下自动化批量上传视频西瓜视频并发布，分享给需要的同学（未做过多的异常处理）。脚本实现首先通过手工手机号登录，保存西瓜视频网站的cookie文件之后加载cookie内容，使用脚本批量上传视频，保存到草稿（也可自动发布，为了二次编辑，如修改封面）最后通过遍历视频草稿列表，来进行草稿视频发布，PS:同一天上传或发布视频太多时，会被西瓜
  • 【C++】模板类vector的简单实现 Q_hd C++c++开发语言
    文章目录1.迭代器2.构造和析构3.容量4.访问5.修改6.测试完整代码总结：在C++的STL库中，vector是一个非常常用的容器，它提供了动态数组的功能。今天我们将一起来实现一个简化版的vector模板类，以便更好地理解它的原理和实现过程。以下是简化版vector类的主要实现：1.迭代器vector的迭代器是一个原生指针，定义如下：typedefTvalue_type;typedefvalue
  • opentracing: jaeger在grpc中的简单实现 liyunlong41 Golang学习golangjaegeropentracinggrpcdemo
    参考项目：https://github.com/grpc-ecosystem/grpc-opentracing之前用函数调用实现了简单jaeger-demo（https://blog.csdn.net/liyunlong41/article/details/87932953），函数之间利用context传递span信息。现在开始在grpc请求中实现简单的grpc-jaeger-demo，span的
  • hive中控制map和reduce数量的简单实现方法 数仓大山哥 hiveHadoop系列map数reduce数
    0、先说结论：由于mapreduce中没有办法直接控制map数量，所以只能曲线救国，通过设置每个map中处理的数据量进行设置；reduce是可以直接设置的。控制map和reduce的参数setmapred.max.split.size=256000000;    --决定每个map处理的最大的文件大小，单位为Bsetmapred.min.split.size.per.node=1;    --节点
  • 异常的核心类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其他