图片加载先显示马赛克问题

问题描述

自己做了个实验,希望的结果是在图片没加载完成的时候显示的是模糊的带马赛克的图片,加载完成后显示清晰图片。TEST2.jsp<imglowsrc="2.jpg"src="test.jsp"width="800"height="600"border="0"/>其中2.JPG是缩略图,test.jsp是用流写入要显示的图片。在网上查了下,说lowsrc指向缩略图,这样放大后就是带马赛克的模糊图片,等图片加载完了就会显示清晰的。我在test.jsp用流写入图片的时候用了线程延时200MS。但是现在并没有显示模糊图片,而是直接出现清晰的图片一点点的从上向下加载。

解决方案

解决方案二:
img的onload里面实现
解决方案三:
顶下
解决方案四:
引用1楼warison2008的回复:

img的onload里面实现

修改了代码如下:<script>functiontest(){varobj=document.getElementById("aa");obj.src="test.jsp";}functionrunOnce(object){object.onload=null;test();}</script><imgid="aa"lowsrc="2.jpg"onload="runOnce(this)"width="800"height="600"border="0"/>现在是出来模糊图片,但是过了2秒钟模糊图片消失,清晰图片又是从上向下一点点的加载
解决方案五:
如果是onload的话,会加载时间比较长,在body外面加入函数可以,速度比较快,但是可能会出现的情况如:显示不完全但是页面上已经显示了
解决方案六:
路过了..学习下

时间: 2024-12-04 16:15:45

图片加载先显示马赛克问题的相关文章

从代码分析Android-Universal-Image-Loader的图片加载、显示流程

从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中四个DisplayImage重载方法的使用,如果你还没有学习,最好先返回去看看,不然可能不理解这篇文章.在这篇文章中我们将主要探讨Android-Universal-Image-Loader的主要流程和这些流程相关的类的分析. 我们先了解一下UIL加载图片的流程(可以通过查看ImageLoader.

js图片加载获取不到宽度和高度解决方法总结

第一次浏览的时候你根本就获取不到图片的宽高值,打印出来都是0,这些纠结了吧,怎么解决呢?就用setTimeout延时加载,200毫秒之后就执行,等图片彻底加载完之后就可以获取宽高了,这样就实现了只适应宽高和水平垂直居中了. 代码  代码如下 复制代码 var parent=$(".imgshow a img");         parent.click(function(){  //alert(test.width());                 var url=$(this

&amp;#106avascript使图片加载进度实时显示

加载|显示 javascript使图片加载进度实时显示 function chk(){  l--;  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"  if (l==0){     for (var i=0;i<sum;i++)       document.body.innerHTML+="<img src='"+imgs[i].s

图片加载进度实时显示

 <html>   <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码|JsCode.CN|---图片加载进度实时显示</title> <script> var l=0; var imgs; var sum=0; var imgs=new Array(); functi

android-类似于京东app显示图片时候如果网速不好会有一段圆弧围绕中心图片旋转,当图片加载出来以后圆弧就消失了

问题描述 类似于京东app显示图片时候如果网速不好会有一段圆弧围绕中心图片旋转,当图片加载出来以后圆弧就消失了 现在我有圆弧旋转效果了,图片也能下载下来 但是下载出来之后那个旋转动画却去不掉 解决方案 加载的时候添加一个显示动态图片的进程 解决方案二: 你图片加载完,你去掉那个圆弧啊?你加载完成怎么做的 解决方案三: 图片加载出来后需要代码处理一下,把那个圆弧去掉,如果没有代码,肯定会一直在转的 解决方案四: 你要知道你处理的逻辑啊!你咋处理判断是否下载数据成功 解决方案五: 在想让他消失的地方

javascript-diiv点击时间数据加载中显示加载中图片加载完还原

问题描述 diiv点击时间数据加载中显示加载中图片加载完还原 <div class="lead-more" id="lead-more" style="margin-top: 120px;"><a href="javascript:;">查看更多>></a></div> $(document).ready(function(){ $("#lead-more&

Javascript实现图片加载从模糊到清晰显示的方法_javascript技巧

1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差. 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片.该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示

图片加载问题在浏览器不能正常显示

问题描述 图片加载问题在浏览器不能正常显示 下面代码在myeclipse visual html design中可以正常显示图片,浏览器中不能正常显示 图片放在与代码同目录下i文件夹中 未设置对齐方式的图像: 图像 在文本中 已设置对齐方式的图像: 图像 在文本中 图像 在文本中 图像 在文本中 请注意,bottom 对齐方式是默认的对齐方式.

jQuery图片加载显示loading效果_jquery

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class="container"> <div class="row block" id="img-list"> <div class="col-md-3"> <img src="/Assets/On