html5图片列表切换浏览模式代码
html5图片列表切换代码
下载资源：69次
下载积分：20分
本站评论功能暂时取消，后续此功能例行通知。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口Android开发技巧——TextView加载HTML的图片及代码显示问题
前几天在做一个Gradle用户指南的应用程序，使用的是TextView来加载HTML内容（至于为什么不用WebView，我也没有认真使用并比较过，也许以后会换吧），其中遇见了一些纠结的问题，所幸主要的问题都一一解决了。
下面说一下遇见的几个问题及我的解决方法。
TextView异步加载HTML中的图片及图文重叠
在TextView中加载HTML图片，需要实现Html.ImageGetter接口，然后在public Drawable getDrawable(String source)中去获取图片。图片获取我是直接使用了ImageLoader，一来加载图片省事，二来带缓存功能，正是我想要的。但是getDrawable方法是在主线程中调用的，且要求返回Drawable对象用于显示，而我们是不能在主线程中进行网络访问的，所以需要异步加载。ImageLoader本身已经有异步加载的功能，所以我们需要将它与getDrawable方法结合起来。这里用的方法与百度上常见到的方法略有不同，因为百度上的方法在我这里会有BUG，在第二次进入时图片经常加载不出来。
首先，写一个类继承BitmapDrawable，代码如下：
package com.githang.gradledoc.
import android.graphics.B
import android.graphics.C
import android.graphics.drawable.BitmapD
* User: Geek_Soledad(msdx.)
* Time: 00:09
public class URLDrawable extends BitmapDrawable {
protected B
public void draw(Canvas canvas) {
if (bitmap != null) {
canvas.drawBitmap(bitmap, 0, 0, getPaint());
这个类用于在getDrawable中返回的对象。
然后写一个类实现Html.ImageGetter接口，代码如下：
public class URLImageParser implements Html.ImageGetter {
TextView mTextV
public URLImageParser(TextView textView) {
this.mTextView = textV
public Drawable getDrawable(String source) {
final URLDrawable urlDrawable = new URLDrawable();
Log.d(&ChapterActivity&, Consts.BASE_URL + source);
ImageLoader.getInstance().loadImage(Consts.BASE_URL + source, new SimpleImageLoadingListener() {
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
urlDrawable.bitmap = loadedI
urlDrawable.setBounds(0, 0, loadedImage.getWidth(), loadedImage.getHeight());
mTextView.invalidate();
mTextView.setText(mTextView.getText()); // 解决图文重叠
return urlD
}这里的mTextView是我们要加载图片的TextView对象。这里我暂未对图片做自适应屏幕的适配，做的比较简单，只是把加载后的图片设置到之前返回的URLDrawable对象中的urlDrawable去，然后调用mTextView.invalidate()方法更新界面。
但是这样写完之后，还有一个问题。尽管我们对urlDrawable调用了setBounds设置它的边框，但是还是会出现图片重叠的问题。需要重新设置一下mTextView的内容，如上面代码中的：
mTextView.setText(mTextView.getText());
设置HTML到TextView的代码如下：
mDocView.setText(Html.fromHtml(doc, new URLImageParser(mDocView), null));
显示的代码格式全乱
TextView虽然可以显示html，但许多标签并不能支持。比如用于显示代码的&pre&,&code&这些标签。原本以为TagHandler可以解决这个问题，但是我在看了网上对TagHandler的用法介绍之后，发现这种用法并不能处理我遇见的这个问题，因为它只能处理解析到的标签之前的内容，无法处理标签之后的内容。好在我在设置HTML的内容到TextView之前是有用jsoup进行一些处理的，于是决定用jsoup进行处理。
处理方法很简单，对&pre&里的标签，把换行符替换成&br/&，把空格替换成&，代码如下：
* 处理代码显示问题.
* @param chapter 章节内容的html元素。
private void handlerPreTag(Element chapter) {
Elements preElems = chapter.select(&pre&);
for (Element elem : preElems) {
elem.html(elem.html().replaceAll(&\n&, &&br/&&).replaceAll(& &, & &));
最后上两张解决这个问题后的效果图：
本文原创，转载请注明出处：http://blog.csdn.net/maosidiaoxian/article/details/
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？HTML图片提交按钮
有时候为了达到比较好的视觉效果，有人会使用图片代替按钮来提交或者重置表单数据。
&FORM name=RedForm
action=# &一:
name=textfield2&
&INPUT type=image height=19 width=53 src="xxx.gif"
align=absMiddle border=0
name=RedImgonclick="this.form.submit()"&
&INPUT type=image
height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImg3 onclick="this.form.reset()"&
二:代替submit按钮的图片代码格式是
&input type="image"
name="..." src="..."
onClick="document.formName.submit()"&
代替reset按钮的代码图片格式是&a
href="javascript:document.formName.reset();"&&img
src="..."&&/a&
name=textfield2&&&&&&&&
&INPUT type=image
height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImgonClick="frm1.action='link.asp'"&
通过onClick="document.form.submit()"来提交表单；用onClick="document.form.reset()"来复位表单，这样一来，任何一个元素（不仅是图片）都可以实现提交表单了。
在这样子的情况下，还可以自定义图片的长度和宽度等
使用图片做按钮的几种方法和优劣
合理的运用图片，能够使站点更加丰富多彩，相信有许多喜欢用图片的设计师都遇到过一个问题：用图片实现表单(form)的重置(reset)按钮时，这个按钮并不能重置表单，相反却执行了提交表单的操作，本文说明了这个问题的原因，并给出了相应的解决方案。
出现上述问题的原因主要是：普通的按钮是通过类型来区分的，submit
为提交按钮，reset
为重置按钮，而类型为图片(type="image")的按钮，其默认操作是提交表单。因此，如果想用图片实现重置按钮，就需要一些额外的设置了。如果想用图片代替重置按钮，可以用下面的方法：
添加onclick事件来实现重置，并通过添加
return false
来避免默认的提交操作：
&form method="post"
name="testForm_2" action=""&
&p&&input type="text"
name="keyword"
&input type="image" src="send.gif"
&input type="image" src="reset.gif"
onclick="javascript:document.forms['testForm_2'].reset(); return
document.forms['testForm_2'].reset();
是将名称为 testForm_2
的表单重置。
是防止提交表单。
（2）直接用图片模拟的重置按钮
&form method="post"
name="testForm_3" action=""&
&p&&input type="text"
name="keyword"
&input type="image" src="send.gif"
&imgsrc="reset.gif" alt="Reset"
onclick="javascript:document.forms['testForm_3'].reset();"
style="cursor:" /&
document.forms['testForm_2'].reset();
是将名称为 testForm_2
的表单重置。
style="cursor:"
设置图片悬停时，显示手型光标。
两种方法大同小异，在javascript被禁止的情况下，第二种方法按钮不会执行任何操作，而第一种方法却会执行提交操作。
当然，我们也可以直接把样式交给 CSS
去处理，用背景图的方式来实现，但是这样需要将 value
的值留空，如果 CSS
被禁止，那么将会显示一个没有文字的按钮，每个方法都有自己的问题，可以根据自己的需要来选择解决方案。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。19878人阅读
浏览器（22）
经过分析，发现网页中存在类似如下的代码：
&img src=&pic.gif& onerror=&javascript:this.src='/noPic.gif';& alt=&pic& /&
分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。
说明：如果图片存在，但网络很不通畅，也可能触发 onerror。
解决方法：
第一种：：.去掉 onerror 代码；或者更改 onerror 代码为其它；或者确保 onerror 中的图片足够小，并且存在。
&script type=&text/javascript&&
function nofind(){
var img=event.srcE
img.src=&/sys/common/image/fileoperation/icon/default.gif&;
img.onerror=
控制不要一直跳动
&td align=&center&&&img src=&/sys/common/image/fileoperation/icon/${file.suffix }.gif& onerror=&nofind();& /&${file.name }&/td&&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：342520次
积分：2060
积分：2060
排名：第18232名
转载：61篇
评论：16条
(3)(4)(11)(7)(24)(12)(1)(4)