imagesLoaded – 检测网页中的图片是否加载

  imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度,还可以绑定自定义事件。可以结合 jQuery、RequireJS 使用。

插件下载     效果演示

使用示例:

// element
imagesLoaded( document.querySelector(‘#container‘), function( instance ) {
  console.log(‘all images are loaded‘);
});
// selector string
imagesLoaded( ‘#container‘, function() {...});
// multiple elements
var posts = document.querySelectorAll(‘.post‘);
imagesLoaded( posts, function() {...});

绑定自定义事件:

var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
  console.log(‘all images are loaded‘);
}
// bind with .on()
imgLoad.on( ‘always‘, onAlways );
// unbind with .off()
imgLoad.off( ‘always‘, onAlways );

您可能感兴趣的相关文章

本文链接:imagesLoaded – 检测网页中的图片是否加载

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

时间: 2024-08-24 06:31:23

imagesLoaded – 检测网页中的图片是否加载的相关文章

Android新浪微博客户端(七)——ListView中的图片异步加载、缓存

原文出自:方杰|http://fangjie.sinaapp.com/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54该项目代码已经放到github:https://github.com/JayFang1993/SinaWeibo 一.ListView的图片异步加载 我们都知道对每一个Weibo Item都有用户头像,而且每一条微博还可能带有图片.如果在加载列表的同时加载图片,这样有几个缺点,第一很费事,界面卡住,用户体验很不

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue

简单的ListView中item图片异步加载

前言: 在android开发当中,从目标地址获取图片往往都是采用异步加载的方法.当完全加载完图片后在进行显示,也有些是直接将加载的图片一点一点的显示出来. 这两个区别只是对流的处理不同而已.现在就讲讲当图片被完全获取到后在显示的方法. 一,效果图:       初始化:                                                   获取后:                         1.1,效果思路: 初始化的时候默认ImageView显示一张白色的图

vue项目中实现图片懒加载的方法

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyl

vue-cli项目中引入图片懒加载

1.全局安装vue-lazyload npm install vue-lazyload -g 2.在main.js配置文件引入 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { //预加载高度 preLoad: 1.3, //错误时显示的图片 error: '/static/about111.jpg', //图片加载中显示的图片 loading: '/static/img/loading.gif', //尝试加载次数 at

vue中使用图片预加载

1; npm i vue-lazyload 2: 在main.js里 import vuelazyload from 'vue-lazyload'; Vue.use(vuelazyload,{ loading: '/static/1.jpg'   // 图片没加载出来之前显示的图片 }) 3:  <img v-lazy="item.url" > 原文地址:https://www.cnblogs.com/cs122/p/10156598.html

【跟我一起学Unity3D】代码中切割图片并且加载帧序列动画

在Cocos2dx中,对大图的处理已经封装好了一套自己的API,但是在Unity3D中貌似没有类似的API,或者说我没找到.不过这也在情理之中,毕竟Unity3D是做3D的,要切割图片的地方还是很少的. 因为我用Unity3D主要是用于做2D游戏的(PS:很蛋疼吧?我也觉得),所以就不得不考虑切图和播放序列帧这两个在2D上常见的功能了,下面废话不多说.我的任务是把下面这张图切割成16块,并且按照动画的序列播放出来. 查Unity3D的使用手册的过程中,我发现了一个类:Texture2D,他是继承

网页前端开发,对于图片慢加载简介

http://www.cnblogs.com/qingseyuandi/p/loadingLater.html 网页前端的图片慢加载给网页显示的成本降低了不少,因此我在这边简单的介绍一下慢加载的一个技术原理,希望能起到抛砖引玉的作用,写的不好的地方希望指正,谢谢~~   技术背景 现在的网页系统,对于一些对图片资源比较多,并且一次性无法浏览完整个网页的情况下,图片慢加载可以提高客户端的体验,如IT大头:淘宝,网易,新浪等等...  技术原理   技术说穿了其实也就那么回事,懂了就简单了,呵呵~

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"