当前位置:首页 > 行业观点 > 详情
sousuo
sousuo

图片延迟加载效果,更细致、效果更好的制作方式

上传时间:2021-06-28            浏览次数:77

图片延迟加载,一般思路是用一个插件,然后弄个空白图片作为默认图片,当页面打开时候延迟加载插件开始工作并请求远程的图片,这样页面打开速度会更快一些,页面效果也更好。但这样还略显粗糙。

因为:

页面进入时候,未加载图片的位置,会有空白;这样显得很单调,用户容易迷茫:这个位置是怎么了?

所以,我们需要更细致的做好这个地方的特效。也就是加一个loading效果提示。但问题来了:页面上有很多位置,大小也不一样,loading.gif怎么做他才能上下左右都居中?

我们的处理办法是:同样大小的位置使用1个loading图片。比如刚才看到那个位置是:285px的,我们就做一个loading.gif ,尺寸是285像素。

注意:位置大小不同,loading.gif要有不同的尺寸,否则就会有被压缩感(如下图所示):

所以,整体上技术不难,关键是做细致的态度很重要。那么,总结一下就是1个要注意的细节:loading.gif要制作不同尺寸的多个图片

当然,图片可以是各种各样的gif图片,比如转圈的,注水的、粒子特效,都可以。

发表评论
请遵守网络文明公约,理性发言
访客头像

还没有人来评论,快来抢个沙发吧!

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们