<img data-src="/path/to/image.jpg" alt="">
img {
opacity: 1;
transition: opacity 0.3s;
}

img[data-src] {
opacity: 0;
}

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});

load image的更多相关文章

  1. load和initialize方法

      一.load 方法什么时候调用: 在main方法还没执行的时候 就会 加载所有类,调用所有类的load方法. load方法是线程安全的,它使用了锁,我们应该避免线程阻塞在load方法. 在项目中使 ...

  2. "NHibernate.Exceptions.GenericADOException: could not load an entity" 解决方案

     今天,测试一个项目的时候,抛出了这个莫名其妙的异常,然后就开始了一天的调试之旅... 花了很长时间,没有从代码找出任何问题... 那么到底哪里出问题呢? 根据下面那段长长的错误日志: -- ::, ...

  3. hibernate的get和load的区别

    在hibernate中我们知道如果要从数据库中得到一个对象,通常有两种方式,一种是通过session.get()方法,另一种就是通过session.load()方法,然后其实这两种方法在获得一个实体对 ...

  4. DOM加载过程中ready和load的区别

    在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...

  5. Resources.Load加载文件返回null的原因

    1.文件夹都要放在Resources目录下 2.加载时photoName不需要扩展名 Texture2D t = Resources.Load<Texture2D>("Loadi ...

  6. elasticsearch按照配置时遇到的一些坑 [Failed to load settings from [elasticsearch.yml]]

    这里整理几个空格引起的问题. 版本是elasticsearch-2.3.0 或者elasticsearch-rtf-master Exception in thread "main" ...

  7. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

  8. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  9. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  10. jquery load 和 iframe 比较

    如果要加载的东西比较简单,里面的没有复杂的数据和逻辑,可以使用load.如果要加载的页面自身有复杂的逻辑.操作,还是建议使用ifame,因为iframe里面可以引入自身的js和样式,而load引入的东 ...

随机推荐

  1. Oracle数据库内置函数

    --ORACLE内置函数:单行函数,集合函数--1.绝对值,取余,判断数据正负函数,SELECT ABS(100),ABS(-100),ABS('100') FROM DUAL;SELECT MOD( ...

  2. Linux之free命令

    from http://www.cnblogs.com/peida/archive/2012/12/25/2831814.html free命令可以显示Linux系统中空闲的.已用的物理内存及swap ...

  3. iOS开发之 Xcode 一个工程 Project 添加多个 target

    http://www.360doc.com/content/14/1203/11/19119980_430056974.shtml# 根据项目需求,同一个工程有多个版本,每个版本只有细微的不同.所以, ...

  4. 转: 浅谈C/C++中的指针和数组(二)

    转自:http://www.cnblogs.com/dolphin0520/archive/2011/11/09/2242419.html 浅谈C/C++中的指针和数组(二) 前面已经讨论了指针和数组 ...

  5. Android控件之AutoCompleteTextView(自动匹配输入的内容)

    一.功能 动态匹配输入的内容,如百度搜索引擎当输入文本时,可以根据内容显示匹配的热门信息 二.独特属性 android:completionThreshold = "2"    — ...

  6. fedora 14安装经验

    初学linux系统,在win7 系统上安装VMware9.0,并用虚拟机安装fedora.安装了好几次,虽然还是没有彻底通透,但也有一点点心得,特地分享一下: 我安装fedora用于嵌入式ARM开发练 ...

  7. android textview段落开头空格问题

    textview中段落开头一般都会空2格排版显示,如果靠编辑空格来解决那就大错特错了,完美的解决方法就是用转义字符"\t",在段首加\t\t就解决啦!

  8. Hexo+github 搭建个人博客(一)

    一.软件环境准备 1.安装git windows下载exe安装:linux 执行 apt-get install git-core 安装 2.安装Node.js windows使用 msi 文件进行安 ...

  9. kafka - topic

    http://www.cnblogs.com/yurunmiao/p/5550906.html http://www.cnblogs.com/chushiyaoyue/p/5695826.html

  10. Cmd Markdown 高阶语法手册

    『Cmd 技术渲染的沙箱页面,点击此处编写自己的文档』 Cmd Markdown 高阶语法手册 1. 内容目录 在段落中填写 [TOC] 以显示全文内容的目录结构. [TOC] 2. 标签分类 在编辑 ...