img 图片加载设置超时
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量。本文中使用现成的lazyload.js插件,文末会放出下载地址。
lazyload.js可以实现图片分批次加载,不是一次性加载完毕再分批次展现。使用该插件有个注意的地方,图片要加上宽高。因为默认图是1像素的,所以如果没有给图片限制宽高,当滚动条滚动时会全部加载出来。
比如下面这段代码,其中的图片会一次性加载完成。
<img data-original="images/bg00001.jpg" src="/js/grey.gif" border="0" />
<img data-original="images/bg00002.jpg" src="/js/grey.gif" border="0" />
<img data-original="images/bg00003.jpg" src="/js/grey.gif" border="0" />
<img data-original="images/bg00004.jpg" src="/js/grey.gif" border="0" />
如果加上宽高限制,则每次只会展示可见区域的图片。具体显示多少张,是根据窗口高度和图片高度而定。
<img data-original="images/bg00001.jpg" height="600" src="/js/grey.gif" border="0" />
<img data-original="images/bg00002.jpg" height="600" src="/js/grey.gif" border="0" />
<img data-original="images/bg00003.jpg" height="600" src="/js/grey.gif" border="0" />
<img data-original="images/bg00004.jpg" height="600" src="/js/grey.gif" border="0" />
从以上代码可以看出,需要延迟加载的图片需要使用data-original属性,属性值是真实的图片地址,默认的src值使用1像素的图片(grey.gif)
使用时需要先加载jqury.js,再加载lazyload.js,并且需要写一段js代码,具体代码如下
<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.lazyload.js" ></script>
<script>$(function() {$("img").lazyload({effect : "fadeIn"});});
</script>
lazyload参数使用说明
1、用图片提前占位
placeholder : "img/grey.gif",
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
2、载入使用何种效果
effect : "fadeIn",
参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
3、提前开始加载
threshold : 200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
4、事件触发时才加载
event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5、对某容器中的图片实现效果
container: $("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6、图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
这些都是在html中的<img>图片延迟加载,其实背景图片也可以延迟加载。背景图片图片延迟加载有一个更大的好处是,爬虫爬取时无法爬取到图片,节省了服务器资源。
背景图片延迟加载跟html中图片延迟加载很相似
<div class="lazy" data-original="img/example.jpg"
width="640" height="480"></div>
这样,只有当这个div出现在可视视窗内时,背景图才会加载显示。
点关注,不迷路
文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话 ~求点赞
img 图片加载设置超时相关推荐
- 图片加载异常兜底方案
背景 网络环境总是多样且复杂的,一张图片可能会因为网路状况差而加载失败或加载超长时间,也可能因为权限不足或者资源不存在而加载失败,这些都会导致用户体验变差,所以我们需要一个图片加载异常的兜底方案. & ...
- Hexo博客Next6.0版本主题配置(背景图片加载、侧边栏社交小图标设置、设置网站图标)
随机背景图片加载 原理 自动更换背景是修改添加背景的css样式实现 图片来源 https://source.unsplash.com/ 修改背景样式 修改themes\next\source\css\ ...
- Universal-imageLoader缓存图片加载
一,先要配置ImageLoaderConfiguration这个类实现全局ImageLoader的实现情况 ImageLoaderConfiguration config = new ImageLoa ...
- Matlab在win10运行不出图片,win10系统网页图片加载不出来的六种原因及解决方法...
大家经常会使用浏览器来浏览一些站点查看图片,最近有的用户说win10系统打开网页时发现页面图片加载不出来,只显示一个×标志,让人百思不得其解,其实出现此问题可能是网速过低,或者浏览器设置里面没有开启相 ...
- Android图片加载--妹子图客户端
图片加载是几乎每个客户端都要用到的功能,这几天闲来无事,以妹子图客户端为例学习了一下android的图片加载.现在整理一下,一来便于自己理解记忆,二来和同样希望学习这方面知识的同学交流,三来贴出自己的 ...
- Android中的图片加载
Android中的图片加载所出现的问题 在Android的开发中,经常需要去加载图片,但是图片的尺寸有时候往往会很大,而我们的内存是有限的,加载进来的时候很有可能会造成内存溢出,这种结果也是我们不想看 ...
- 图片加载框架Glide使用详解
最终我还是决定使用Glide,作为我以后的主要图片加载框架.主要基于三点考虑 代码有人维护,不至于出现问题,项目组都搞不定的时候问题无法解决.(ImageLoader已没人维护了) 代码简洁,可读性很 ...
- html游戏加载不出图片吗,网页图片加载不出来
很多小伙伴在用打开网页的时候,发现网页的图片加载不出来,显示一个×的标志,这是怎么一回事呢?可能是你的网速过低,等待一会就可以了,也可能是设置里面没有开启相关模式,具体的解决方法下面一起来看看吧. 网 ...
- 未来教育c语言加载不出来图片,win10系统网页图片加载不出来的六种原因及解决方法[多图]...
大家经常会使用浏览器来浏览一些站点查看图片,最近有的用户说win10系统打开网页时发现页面图片加载不出来,只显示一个×标志,让人百思不得其解,其实出现此问题可能是网速过低,或者浏览器设置里面没有开启相 ...
最新文章
- 普林斯顿三大读本,学数学必入!
- MNA-CNN: 如何在美学质量评估中储存照片原始信息
- boost::math::catmull_rom用法的测试程序
- lua-5.2.3编译问题记录quot;libreadline.so: undefined reference to `PC#39;quot;
- C#中Cookies的读取
- 11/100. Convert BST to Greater Tree
- java中的双与_java 双冒号是什么操作符?
- Spring Data JPA 写SQL语句也可以如此简单
- [bzoj1026] [SCOI2009]windy数
- 惠普Teradici PCoIP 受OpenSSL 漏洞影响,波及1500万个端点
- 关于elasticsearch boostrap checks failed错误类型整理及解决方法
- java文件生成jar包_编译Java文件并生成jar包
- 字节码指令之加载与存储指令
- 从MyEclipse转战到IntelliJ IDEA的经历
- 鸡兔同笼——算法详解
- 【数据存储】分布式文件系统SeaweedFS
- 【数据库】select、from、where、group by、having、order by、limit的组合用法
- 7-2 分解素因子 (10 分)
- 如何选股票-时寒冰-不断更新
- 初学者如何查阅自然语言处理(NLP)领域学术资料
热门文章
- 段码液晶屏怎么焊接?
- PHP——人人都会编程
- 神还原女神照片!GAN 为百年旧照上色
- python内存泄露memory leak排查记录
- [css] 积累(old)
- 联想服务器重装系统快捷键,联想电脑如何重装系统快捷键
- 【无用之书】侦探小说的二十条规则
- hikari数据源配置类_SpringBoot2集成Mybatis Hikari多数据源配置
- 【git 报错】git add添加到暂存区报错:fatal: pathspec ‘xxx‘ did not match any files
- Matlab含新能源(风电光伏)和多类型电动汽车配电网风险评估 由于电动汽车负荷与风电光伏出力的不确定性,造成配电网运行风险,运用蒙特卡洛概率潮流计算分析电压和线路支路越限