图片太大的处理方法

一. 图片压缩
在线图片压缩工具:
https://tinypng.com/
有较好的压缩率 但是大图和简笔画容易失真
http://tools.dynamicdrive.com/imageoptimizer/
可以转换多种图片格式,画质可选性多
webp
能减少图片所占内存,画质基本不变,但是浏览器支持度不够
二、使用渐进式加载

安装

npm install progressive-image -S

引入css

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

html

<div class="progressive>
	<img class="preview" v-progressive="preview" :src="bc"/> 
</div>

js

<script>
	import Vue from 'vue'
	import progressvie from 'progressive-image/dist/vue'
Vue.use(progressive,{
   removePreview: true,
   scale: true
})

export default {
data() {
   return {
   		bc: './static/imgs/bc45.png',  //有损的图片
   		preview: './static/imgs/bc.svg' //最终展示的大图
   }
}
</script>
<style>
   .progressive {
     position: relative;
     display: block;
     overflow: hidden;
     margin-top:200px;
   }
   .progressive img {
     display: block;
     width: 100%;
     max-width: 100%;
     height: auto;
     border: 0 none;
   }
   .progressive img.preview {
     filter: blur(2vw);
     transform: scale(1.05);
   }
   .progressive img.hide {
     opacity: 0;
   }
   .progressive img.origin {
     position: absolute;
     left: 0;
     top: 0;
     animation: origin 1.5s ease-out;
   }
   .progressive img.origin-scale {
     position: absolute;
     left: 0;
     top: 0;
     animation: origin-scale 1s ease-out;
   }
   @-moz-keyframes origin {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
   }
   @-webkit-keyframes origin {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
   }
   @-o-keyframes origin {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
   }
   @keyframes origin {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
   }
   @-moz-keyframes origin-scale {
     0% {
         opacity: 0;
         transform: scale(1.1);
     }
     100% {
         opacity: 1;
         transform: scale(1);
     }
   }
   @-webkit-keyframes origin-scale {
     0% {
         opacity: 0;
         transform: scale(1.1);
     }
     100% {
         opacity: 1;
         transform: scale(1);
     }
   }
   @-o-keyframes origin-scale {
     0% {
         opacity: 0;
         transform: scale(1.1);
     }
     100% {
         opacity: 1;
         transform: scale(1);
     }
   }
   @keyframes origin-scale {
     0% {
         opacity: 0;
         transform: scale(1.1);
     }
     100% {
         opacity: 1;
         transform: scale(1);
     }
   }

</style>
三、懒加载

安装

	npm install vue-lazyload -S

引入插件

	import VueLazyload from 'vue-lazyload'
	Vue.use(VueLazyLoad, {
		error: './static/error.png',
		loading: './static/loading.png'
	})

使用

<img class="item" v-lazy="bc"/>
四、上传到资源服务器
Spring4GWT GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache SimpleCache 是一个简单易用的java缓存工具,用来简化缓存代码的编写,让你摆脱单调乏味的重复工作!1. 完全透明的缓存支持,对业务代码零侵入 2. 支持使用Redis和Memcached作为后端缓存。3. 支持缓存数据分区规则的定义 4. 使用redis作缓存时,支持list类型的高级数据结构,更适合论坛帖子列表这种类型的数据 5. 支持混合使用redis缓存和memcached缓存。可以将列表数据缓存到redis中,其他kv结构数据继续缓存到memcached 6. 支持redis的主从集群,可以做读写分离。缓存读取自redis的slave节点,写入到redis的master节点。 Java对象的SQL接口 JoSQL JoSQL(SQLforJavaObjects)为Java开发者提供运用SQL语句来操作Java对象集的能力.利用JoSQL可以像操作数据库中的数据一样对任何Java对象集进行查询,排序,分组。 搜索自动提示 Autotips AutoTips是为解决应用系统对于【自动提示】的需要(如:Google搜索), 而开发的架构无关的公共控件, 以满足该类需求可以通过快速配置来开发。AutoTips基于搜索引擎Apache Lucene实现。AutoTips提供统一UI。 WAP浏览器 j2wap j2wap 是一个基于Java的WAP浏览器,目前处于BETA测试阶段。它支持WAP 1.2规范,除了WTLS 和WBMP。 Java注册表操作类 jared jared是一个用来操作Windows注册表的 Java 类库,你可以用来对注册表信息进行读写。 GIF动画制作工具 GiftedMotion GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的PList类库 Blister Blister是一个用于操作苹果二进制PList文件格式的Java开源类库(可用于发送数据给iOS应用程序)。 重复文件检查工具 FindDup.tar FindDup 是一个简单易用的工具,用来检查计算机上重复的文件。 OpenID的Java客户端 JOpenID JOpenID是一个轻量级的OpenID 2.0 Java客户端,仅50KB+(含源代码),允许任何Web网站通过OpenID支持用户直接登录而无需注册,例如Google Account或Yahoo Account。 JActor的文件持久化组件 JFile JFile 是 JActor 的文件持久化组件,以及一个高吞吐量的可靠事务日志组件。 Google地图JSP标签库 利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth 1.0a 和 OAuth 2.0 的框架,提供了简单的方式通过社交媒体进行身份认证的功能。 Eclipse的JavaScript插件 JSEditor JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值