网站：
编写的最初版本的页面加载速度过慢，而且要等待主页所有图片都加载完成才能进入网站主页，所以后续版本对页面的加载速度进行了优化。由于主页是使用瀑布流方式进行展示的，所以最先加入了懒加载的显示方式来保证缩短进入主页的加载时间。加入图片懒加载后，主页中放置的原图同样需要很长的请求下载时间，所以后来修改为了生成缩略图进行展示，然后主页启用腾讯CDN加速，加快图片加载速度。
懒加载
参考链接：
实现方式：首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var viewHeight = document.documentElement.clientHeight;//可视区高度 function lazyload() { var eles = document.querySelectorAll('img[data-original][lazyload]') Array.prototype.forEach.call(eles, function (item, index) { var rect; if (item.dataset.original === "") return; rect = item.getBoundingClientRect();//获得页面中某个元素的左，上，右，下相较于浏览器视窗的位置 if (rect.bottom >= 0 && rect.top < viewHeight) { !function () { var img = new Image(); img.src = item.dataset.original; img.onload = function () { item.src = img.src; }; item.removeAttribute("data-original");//下次不再遍历 item.removeAttribute("lazyload"); }() } }) } lazyload(); document.addEventListener("scroll", lazyload) |
生成缩略图
使用python中的pillow库来生成对应的缩略图。
1 2 3 4 5 6 | from PIL import Image img = Image.open(file_path) w, h = img.size img.thumbnail(((int)(w / 4), (int)(h / 4))) img.save(file_path) |
以下是thumbnail()函数实现方式:
缩略图函数可以传入两个参数，第一个为生成的缩略图大小，但不能大于原图大小；第二个为缩略图生成的采样方式，提供四种方式：（此参数可不选，默认为 BICUBIC )
NEAREST：最近滤波。从输入图像中选取最近的像素作为输出像素。它忽略了所有其他的像素。
BILINEAR：双线性滤波。在输入图像的2x2矩阵上进行线性插值。注意：PIL的当前版本，做下采样时该滤波器使用了固定输入模板。
BICUBIC：双立方滤波。在输入图像的4x4矩阵上进行立方插值。注意：PIL的当前版本，做下采样时该滤波器使用了固定输入模板。
ANTIALIAS：平滑滤波。这是PIL 1.1.3版本中新的滤波器。对所有可以影响输出像素的输入像素进行高质量的重采样滤波，以计算输出像素值。在当前的PIL版本中，这个滤波器只用于改变尺寸和缩略图方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | def thumbnail(self, size, resample=BICUBIC): """ Make this image into a thumbnail. This method modifies the image to contain a thumbnail version of itself, no larger than the given size. This method calculates an appropriate thumbnail size to preserve the aspect of the image, calls the :py:meth:`~PIL.Image.Image.draft` method to configure the file reader (where applicable), and finally resizes the image. Note that this function modifies the :py:class:`~PIL.Image.Image` object in place. If you need to use the full resolution image as well, apply this method to a :py:meth:`~PIL.Image.Image.copy` of the original image. :param size: Requested size. :param resample: Optional resampling filter. This can be one of :py:attr:`PIL.Image.NEAREST`, :py:attr:`PIL.Image.BILINEAR`, :py:attr:`PIL.Image.BICUBIC`, or :py:attr:`PIL.Image.LANCZOS`. If omitted, it defaults to :py:attr:`PIL.Image.BICUBIC`. (was :py:attr:`PIL.Image.NEAREST` prior to version 2.5.0) :returns: None """ # preserve aspect ratio x, y = self.size if x > size[0]: y = int(max(y * size[0] / x, 1)) x = int(size[0]) if y > size[1]: x = int(max(x * size[1] / y, 1)) y = int(size[1]) size = x, y if size == self.size: return self.draft(None, size) im = self.resize(size, resample) self.im = im.im self.mode = im.mode self._size = size self.readonly = 0 self.pyaccess = None |
CDN加速
项目中使用，为图片展示首页进行加速，目前首页加载速度本地测试 1.5s 以内。
