<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. VI查找与替换

    一.vi查找:    当你用vi打开一个文件后,因为文件太长,如何才能找到你所要查找的关键字呢?在vi里可没有菜单-〉查找, 不过没关系,你在命令模式下敲斜杆(/)这时在状态栏(也就是屏幕左下脚)就出 ...

  2. iOS开发 返回字符串的宽高

    - (CGFloat)achiveWidthWithHeight:(CGFloat)height Font:(UIFont *)font { CGSize size = [self boundingR ...

  3. pysam - 多种格式基因组数据(sam/bam/vcf/bcf/cram/…)读写与处理模块(python)

    在开发基因组相关流程或工具时,经常需要读取.处理和创建bam.vcf.bcf文件.目前已经有一些主流的处理此类格式文件的工具,如samtools.picard.vcftools.bcftools,但此 ...

  4. PacBio长reads的大基因组组装

    原文链接:Large Genome Assembly with PacBio Long Reads 可以以多种方式利用PacBio长reads来生成和改进大型基因组的de novo组装. 你可以用几种 ...

  5. osx 10.11.5 El Capitan U盘制作安装

    osx 10.11.5 El Capitan U盘制作安装 1. 下载osx10.11.5 从mac的 appstore下载(官方原版) 2. U盘8G起(注意备份重要资料) 3. 下载完成之后在Fi ...

  6. linux笔记:linux帮助命令,man,help,whatis,apropos

    命令名称:man功能:获得帮助信息命令所在路径:/usr/bin/man用法:man 命令或配置文件其他:会调用less来查看该命令或配置文件的帮助信息. 命令名称:whatis功能:获得命令的简短介 ...

  7. IIS提示Server Application Unavailable

    浏览器访问网站,IIS提示Server Application Unavailable,我的解决方式是进入IIS管理界面,找到对应的站点,之后重启这个站点.

  8. python 练习 8

    #!/usr/bin/python # -*- coding: utf-8 -*- def ntom(x,size,mod): t=[0]*(size) j=0 while x and j<si ...

  9. (11)odoo权限机制

    -----------------更新时间:10:21 2016-09-29 星期四14:31 2016-09-28 星期三 权限对象命名修改18:06 2016-09-18 星期日11:55 201 ...

  10. hdu----(1257)最少拦截系统(dp/LIS)

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...