照片墙瀑布流加载与阻止加载

网上大部分主流的瀑布流应用基本都是由后端在提供图片地址的同时提供图片宽高，这样，前端不必等待图片渲染完成，可以根据图片的宽高先把装载图片的容器或父节点先放上页面，完成基础性的布局，再让图片以渐变或其他方式逐步呈现。但如果前端在获取图片数据的同时无法得知其宽高，势必要遭遇很多尴尬的状况。

本文记述一些笔者在照片墙项目中，未知图片宽高的情况下，处理瀑布流的加载与阻止加载的一些方法。不知道是否有同道中人遇到过类似的情况，希望抛砖引玉，听取各位的想法和意见。

如果前端在图片渲染前不知道宽高，首先就意味着必须监听图片onload。onload 后才能知道图片宽高，onload callback才能把图片放上页面。这样一来，由于每张照片都要监听 onload , 瀑布加载的性能与效率就等于输在起跑线上，但貌似也只能监听onload。

监听onload 带来的麻烦：

由于 onload 的 callback函数是异步执行的，在切换照片的搜索条件，比如性别，年龄，城市等，有可能会造成上一轮的照片还在加载，就会造成类似明明切换了女性的照片，但仍能看到几张男性照片的局面。如此一来，必须要在每次切换条件时，先阻止上一轮的图片加载，再开始加载新一轮。以下是兼容 ie 的阻止图片加载（下载）的代码：

参考：

http://stackoverflow.com/questions/3146200/stop-loading-of-images-on-a-hashchange-event-via-javascript-or-jquery

红色字体的请求代表被阻止下载的图片请求，Status 显示为 canceled。图片加载地越快，切换条件时需要停止的未加载的图片的数量就越少。

因 imgs 的 onload 做了如此多的麻烦事后，瀑布流加载在性能上也损失不少，是否有办法从别处弥补回一些损失。一般的照片墙，初始时向后端请求1屏，随着用户拉动滚动条至屏幕出现空白区域后，再向后端请求新一屏的照片数据，如此一来，尤其是当图片及ajax数据请求缓慢的情况下，势必会让用户的视觉在屏幕的空白区域停留过久，影响体验。那么是不是可以减少 http 请求数，比如后端一次性传 5 屏的数据，而前端 append 图片还是随着用户拉动滚动条，一屏一屏地来，其实就是图片的“懒加载”，即需即取，代码大略如下：

——获取数据时，可先将后端返回的每一张图片的地址保存在一个自建的图片属性中，如：tmpsrc

——当用户拉动滚动条至屏幕出现空白区域后，再将一屏地图片附上正式的src，开始下载：

完！

转载于:https://www.cnblogs.com/miyalinlin/archive/2013/05/24/3096475.html

照片墙瀑布流加载与阻止加载相关推荐

jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css">body,html{margin: 0;padding:0;}#container{position ...
RecyclerView瀑布流的形式利用Gilde加载网络图片
RecyclerView的简单介绍 RecyclerView 是在Android5.0之后推出的,是一个比ListView更加灵活更加高效的适配器类型控件.但是RecyclerView不同于其他类型的 ...
Php资讯瀑布流模板,无限下拉加载瀑布流zblogphp模板还有自适应+seo优化-收费zblogphp模板-天兴工作室...
主题更新: 2019年01月11日更新:此次更新较大,请老用户先浏览演示网站确定符合需求后再升级. 1.增加主题自带seo配置(新增seo标题和间隔符): 2.大幅度优化了界面,彻底修复了某些分辨率下 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
RecyclerView加载瀑布流，图片自适应问题
在使用recyclerView加载瀑布流时,由于图片加载慢于item绘制,从而导致item中的图片无法正常显示,不是被压缩就是拉伸. 解决方案: 1.后台给一个图片的原始宽高,在recyclerVie ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
提升网页加载速度—预加载VS预读取
预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能 ...

照片墙瀑布流加载与阻止加载

照片墙瀑布流加载与阻止加载相关推荐

最新文章

热门文章