微信公众号开发--善忘影视(十)
优化列表加载速度,列表图片压缩
如下图左边的图片
运行了一段时间后,发现打开公众号,或者网页的列表速度很慢,用chrome查看了一下加载时间, 主要是还是在加载图片上,毕竟列表加载那么大的图片,是一件很费时间的事情,现在我就来优化它。
主要分三个步骤 1. 获取列表图片(获取详情页中的海报图片) 2. 压缩图片 3. 上传云存储图片,保存路径到数据库中 3. 修改显示列表图片,显示压缩后的图片
获取列表图片
主要是通过定时器来获取列表数据,然后分析详情页的里面的图片地址,下载对应图片。 关键代码如下
List<MovieCrawl> movieCrawlList = movieCrawlMapper.listNotDealImgByCreateTime();
try {
movieCrawlList.forEach(mc -> {
String content = mc.getContent();
if (StringUtils.isNotNull(content)) {
Document doc = Jsoup.parse(content);
Elements imgs = doc.select("img");
StringBuffer stringBuffer = new StringBuffer();
mc.setSmallPic("img/logo.jpg");
if (imgs.size() > 0) {
Iterator<Element> it = imgs.iterator();
String src = it.next().attr("src");
//mc.setFirstImg(src);
String smallPic = downloadFileResizeImg(src);
if (StringUtils.isNotNull(smallPic)) {
String ext = FileUtil.getExt(new File(smallPic).getName());
String key = UploadUtils.generateFilename("img/small", ext);
try {
uploadQiNiu.upload(smallPic,key);
mc.setSmallPic(key);
} catch (IOException e) {
logger.error(e.getMessage(), e);
}
}
}
}
movieCrawlMapper.updateByPrimaryKeySelective(mc);
});
} catch (Exception e) {
logger.error(e.getMessage(), e);
}
压缩图片
上面代码中String smallPic = downloadFileResizeImg(src);
就是表示下载图片
代码如下,里面还有压缩图片的代码
```public String downloadFileResizeImg(String url) { try { String uuid = UUIDUtils.getUUID(); URL u = new URL(url); URLConnection conn = u.openConnection(); //conn.connect(); //设置可以输出 conn.setDoOutput(true); //设置可以读取默认是true conn.setDoInput(true); //设置不适用缓存,因为我们的数据是实时更新的 conn.setUseCaches(false); //设置所有的http连接自动处理重定向 HttpURLConnection.setFollowRedirects(true); //设置本次连接自动处理重定向 conn.setAllowUserInteraction(true); //模拟ios 谷歌浏览器访问 conn.setRequestProperty("User-Agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 1075) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11"); InputStream is = conn.getInputStream(); if (url.indexOf("?") > -1) { url = url.substring(0, url.indexOf("?")); } String filename = url.substring(url.lastIndexOf("/") + 1); filename = filename.replaceAll("[\-\::\<>|\?]", "_") .replaceAll("\s", "");
filename = uuid + "_" + filename;
System.out.print(filename);
String downloadpath = ResourceBundleUtils.getAppAbstractPath();
File t_file = new File(downloadpath + filename);
OutputStream os = new FileOutputStream(t_file);
int tmp = 0;
while ((tmp = is.read()) != -1) {
os.write(tmp);
}
os.close();
is.close();
String ext = FileUtil.getExt(filename);
File deskFile = new File(downloadpath + uuid + "180180." + ext);
isi.resizeFix(t_file, deskFile, 180, 180);
return deskFile.getAbsolutePath();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}```
压缩图片代码isi.resizeFix(t_file, deskFile, 180, 180);
public static void resizeFix(File srcFile, File destFile, int boxWidth,
int boxHeight) throws IOException, MagickException {
ImageInfo info = new ImageInfo(srcFile.getAbsolutePath());
MagickImage image = new MagickImage(info);
// 计算缩小宽高
Dimension dim = image.getDimension();
int width = (int) dim.getWidth();
int height = (int) dim.getHeight();
int zoomWidth;
int zoomHeight;
if ((float) width / height > (float) boxWidth / boxHeight) {
zoomWidth = boxWidth;
zoomHeight = Math.round((float) boxWidth * height / width);
} else {
zoomWidth = Math.round((float) boxHeight * width / height);
zoomHeight = boxHeight;
}
// 缩小
MagickImage scaled = image.scaleImage(zoomWidth, zoomHeight);
// 输出
scaled.setFileName(destFile.getAbsolutePath());
scaled.writeImage(info);
scaled.destroyImages();
}
```
####上传图片到云存储
我这里用的是七牛, 以前用的是阿里云的oss,现在不免费了,就先用用有一定免费额度的七牛了。都是有线程的api可以调用,不过七牛里面设置区域比较坑,在调用上传的时候记得加上这句。Config.zone = Zone.zone1();
不然总是返回然后设置zone的问题。
public void upload(String filePath, String key) throws IOException { try { Config.zone = Zone.zone1(); //调用put方法上传 Response res = uploadManager.put(filePath, key, getUpToken()); //打印返回的信息 System.out.println(res.toString()); } catch (QiniuException e) { Response r = e.response; // 请求失败时打印的异常的信息 System.out.println(r.toString()); try { //响应的文本信息 System.out.println(r.bodyString()); } catch (QiniuException e1) { //ignore } } } ```
最后修改对应显示的列表
<img class="weui_media_appmsg_thumb" src="${item.firstImg}" alt="">