我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

不知道大家是否已经习惯了,打开一个网页之后,在网速慢的情况下,看着图片从上到下一点点的显示。但是如果你打开百度的图片搜索显示页面,就会发现,它的展示形式和我们的习惯上是不一样的。它有个从模糊到清晰的过程。

苏南大叔:前端图片优化显示,PHP修改图片交错渐进显示 - php-img-hero
前端图片优化显示,PHP修改图片交错渐进显示(图6-1)

效果展示

大家可以自行百度任何一张图片来感受一下。下面的这2个对比效果图,是从网络上盗的图,这里向原作者表示感谢。这个图做的太好了,无法超越。大家看看对比效果。

苏南大叔:前端图片优化显示,PHP修改图片交错渐进显示 - jiaocuo_1
前端图片优化显示,PHP修改图片交错渐进显示(图6-2)

苏南大叔:前端图片优化显示,PHP修改图片交错渐进显示 - jiaocuo_2
前端图片优化显示,PHP修改图片交错渐进显示(图6-3)

photoshop效果

在photoshop保存图片为png和gif格式的时候,是有这个交错显示的选项的。当保存为jpg格式的时候,选项中的“连续”就是我们所期待的“交错”效果。见下图。

苏南大叔:前端图片优化显示,PHP修改图片交错渐进显示 - png_jiaocuo_01
前端图片优化显示,PHP修改图片交错渐进显示(图6-4)

苏南大叔:前端图片优化显示,PHP修改图片交错渐进显示 - png_jiaocuo_03
前端图片优化显示,PHP修改图片交错渐进显示(图6-5)

php控制图片模式

本篇文章中,苏南大叔不是教大家使用PS的,所以,这里就不展开叙述了。我们说的是如何利用PHP做这个事情。注意,php.ini中必须开启GD库。

代码非常简单,如下:

$image = imagecreatefromjpeg("youpath/to/imagefile");
imageinterlace($image,1);
imagejpeg($image,"youpath/to/imagefile");
imagedestroy($image);

其中关键函数就是 imageinterlace 函数。苏南大叔的博客,很早之前就启用了水印功能,所以,这里,我对原有的水印功能,做了点小小的修改。使之能够支持图片交错模式。

苏南大叔:前端图片优化显示,PHP修改图片交错渐进显示 - png_jiaocuo_00
前端图片优化显示,PHP修改图片交错渐进显示(图6-6)

就加了这么一句话,然后苏南大叔的博客水印图,全部都被“交错”显示了。很不错的说。

相关链接

总结

苏南大叔的php文章,都在下面的链接里面:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   php