js、jquery 图像载入效果 Image Loading Effect
来源:互联网 发布:华为mate9怎么样知乎 编辑:程序博客网 时间:2024/06/05 09:44
Demo下载地址:
https://github.com/SunnyWoo/ImageLoadEffect
代码片段:
var imgList = ["http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575926968307712/598c24ea85c265245.jpg","http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575928688230400/598c24ea85f8e8217.jpg","http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575930797707264/598c24ea8617e2486.jpg","http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575933506277376/598c24ea863c51554.jpg","http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575936371122176/598c24ea865279731.jpg","http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575937634938880/598c24ea866901074.jpg","http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575939165601792/598c24ea867f08783.jpg"];function loadImage(src, callback) {var img = document.createElement("img");img.src = src;img.addEventListener("load", function() {if(this.complete) {callback();}});}var bindHtml = function() {var html = '';for(var i = 0; i < imgList.length; i++) {html += '<span class="col-xs-4 wx-pip middle-xs"><span><img data-src="' + imgList[i] + '" /></span></span>';}$("#rowList").html(html);//循环判断所有的img$("#rowList img").each(function() {var _this = $(this);if(_this.attr("src") == undefined) {var _src = _this.attr("data-src");loadImage(_src, function() {//载入成功后执行 添加延迟 使用中可删除setTimeout(function() {_this.attr("src", _src);_this.parent().css("background-image", "none");}, 400);});}});};bindHtml();
阅读全文
0 0
- js、jquery 图像载入效果 Image Loading Effect
- Cg Programming/Unity/Minimal Image Effect最小的图像效果
- 一个基于jquery的页面预载入效果(loading)
- 一个基于jquery的页面预载入效果(loading)
- 一个基于jquery的页面预载入效果(loading)
- js loading image class
- jquery ajax loading效果
- jquery loading效果
- js 实现loading效果
- js 遮罩层 loading 效果
- Loading an Image:加载一幅图像
- jquery学习第六番 effect 效果
- jquery ajax之loading效果
- JQuery 实现页面 loading 效果
- Unity3D图像后处理特效——Fisheye image effect
- Unity3D图像后处理特效——Blur image effect
- Unity3D图像后处理特效——Glow image effect
- Unity3D图像后处理特效——Grayscale image effect
- Jquery中阻止默认冒泡事件
- [Windows service crash分析]一次编码转换导致的堆破坏
- VMware 12和宿主机网络互通
- B. Dima and To-do List----暴力
- Postfix邮件过滤spam和virus函数
- js、jquery 图像载入效果 Image Loading Effect
- dySE:一个 Java 搜索引擎的实现
- JSON开发笔记(三)—— JSON Schema实战(中)
- 关注国情民情,从身边做起
- 达内课程-各种监听器
- 聚集索引与非聚集索引的区别
- centos7 配置 php mysql appche 环境
- zk
- Android Studio集成NDK