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

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

因为：

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

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

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

注意：位置大小不同，loading.gif要有不同的尺寸，否则就会有被压缩感（如下图所示）：

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

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