加载后执行RunAfterImgLoaded.js

boyanx6个月前技术教程16

RunAfterImgLoaded.js故名思议是一款在图片加载完之后执行的一个js插件,但是这个还只是一个设想,有时间会再将它做出来。关于图片加载完之后执行的问题引申出一些新的发现。

在最近一个切图项目中运用到了瀑布流效果,基于masonry插件很轻松解决了,但是后来发现一个问题,在网速较慢的情况下,瀑布流效果失效了。以前端经验来看,这个问题出的很明显,在网速较慢的是,图片还未加载完,但是masonry函数在$(document).ready()的时候已经执行了,这个时候插件就无法获取图片宽和高,就无法将图片正确的摆放好位置,所以要解决这个问题,需要在图片加载完之后执行它即可。

于是就打算写个RunAfterImgLoaded.js插件。

google一下。发现这类的插件已经有人开发出来了,大家可以用一下,省的再去找了。

http://imagesloaded.desandro.com/

不过这里的瀑布流问题通过更简单的方法解决了,所以基本可以判断jQuery内置了这样一个函数imagesLoaded,就是专门解决这个问题的。。万能的jQuery!

$(function(){

var $container=$('.honors ul');

$container.imagesLoaded( function(){

$container.masonry({

itemSelector :'li',

columnWidth : 4,

isAnimated : true

});

});

});

写在最后,这情况在web前端开发时候经常有,以前没有笔记下来,现在喜欢写出来,一个是自媒体的原因,这个houyuan.qietu.com 是切图网所有子网站中唯一一个内容全部来自原创的网站。第二个原因是,我发现这个频道在切图网所有页面中的排名中很靠前。看来原创有利于seo真不是盖的。

标签: jquery loading

相关文章

小技巧,如何使用 webpack 降低前端资源文件维护成本

前言前端现在开发某个常见功能,直接会在 npm 找到合适的包,这些包存在于 node_modules 目录下。如何减少包体积,用下 CDN 加速,或者这个模块只有 script 标签导入方式时,直接从...

Jquery加载本地文件出现跨域错误的解决方案

禁止跨域是浏览器的安全限制机制,会报告上述错误。但是可以通过设置来绕过这个限制(如果经常调试前端代码,可以在本机装个web容器)。常见的方式:右击chrome快捷方式,选择“属性”,在“快捷方式”下的...

C#二次开发BIMFACE系列37 网页集成开发1审图系统中加载模型或图纸

在之前的《C#开发BIMFACE系列》中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程。服务端API测试通过后,需要根据具体业务的需求集成到管理系统中,配合BIMFACE提供的...

前端面试:异步加载和延迟加载的理解?

回答:异步加载和延迟加载是前端优化网站性能的两种方法。异步加载的方案: 动态插入script标签通过ajax去获取js代码,然后通过eval执行script标签上添加defer或者async属性创建并...

伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件

开发环境:citymaker 7(以下简称cm),jquery,easyui 1.4(界面),visual studio 2012(没有vs,部署到IIS也行,html在本地目录双击打开可用)以下演示...

资源分享:炫酷的css3动画加载框架Loaders

页面加载动画在web应用中必不可少,加载动画效果也各有千秋。在web页面ajax请求,单页面应用页面切换时好的加载动画会让浏览者赏心悦目忘记加载的耗费时间,一个性能好的页面,必须有loading预加载...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。