西安网站建设
在线咨询

扫描二维码分享到微信

JS实现让网站上的图片加载更快

【建站知识】  2021-02-21 

JS实现让网站上的图片加载更快

 

可以像Google图片搜索一样,先加载缩略图,再逐步变清晰,参考代码,采用JS可以实现
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  • <html xmlns="http://www.w3.org/1999/xhtml">  
  • <head>  
  • <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  • <title>图片由模糊变清楚</title>  
  • </head>  
  • <body>  
  • <a href="http://www.forasp.cn/"><img src="http://www.forasp.cn/test/images/smail_showimg.jpg" name="myImage" width="901" height="567" id="myImage"  alt="图片由模糊变清楚" /></a><br />  
  • <center><span id="showinfo">正在加载-------</span></center><!--这里是一个缩略图的图像,开始是按照源图像大小打开该图像--->  
  • <script type="text/javascript">  
  • var img = new Image();   
  • img.src = "http://www.forasp.cn/test/images/big_showimg.jpg";   
  • img.onload = function()   
  • {//这里是要加载的源图像,document.getElementById('myImage').src = this.src;   
  • document.getElementById('showinfo').innerHTML='加载完毕,<a href=images/big_showimg.jpg>查看原图</a>';   
  • }   
  • </script>  
  • </body>  
  • </html>

上一篇:css实现鼠标移上去显示内容
下一篇:php倒计时10分钟后显示不同内容---测试可用

网站栏目

建站知识 前端设计 酷站欣赏 SEO优化 网络营销 服务器安全 行业新闻 公司新闻 建站工具


最新文章

元宵佳节 西安赏灯 手机随手拍摄

元宵佳节 西安赏灯 手机随手拍摄

黑米网络2021春节:元宵节 西安赏灯,手机随手拍摄,2月26日就是元宵节了,西安黑米网...

元宵佳节 西安赏灯 手机随手拍摄

黑米网络2021春节:元宵节 西安赏灯,手机随手拍摄,2月26日就是元宵节了,西安黑米网...

财税建站:自助机无盘领票以后

财税建站之:自助机无盘领票以后为何税盘读取不到发票,西安黑米网络推荐操作解决办法...

网站优化案例-网站seo排名优化

西安黑米网络今天把最近做的几个网站优化案例整理出来,其实seo优化涉及很多方面,网站...

网络建站公司之地址迁出流程

网站建设公司之地址迁移流程最近黑米网络对公司地址做了变更迁出,去办事大厅咨询了相...


相关内容

Notepad++实现多行文件替换的方法

Notepad++实现多行文件替换的方法:默认就是支持多行替换的直接选择多行,就可以,note...

phpcms做博客建站实现首页像Wor

本文讲解phpcms v9如何在首页实现像WordPress博客系统一样的分页,方法如下:1、在apa...

JS实现让网站上的图片加载更快


随机推荐

织梦cms Tag静态化文件替换后

织梦cms dedecms Tag静态化文件替换后手机站内页,列表页无法访问:主要原因找到文件...

织梦建站dedecms模板中时间标签

[field:pubdate runphp=& 39;yes& 39;] $ntime = time(); $oneday = 3600 * 24; $oneday1

pureftpd 可以限制 某个ftp账

pureftpd 可以限制 某个ftp账号 只能某个ip链接吗?

phpcms截取简介时,前面的空格

phpcms截取简介时,前面的空格是用什么方法去掉的(注意替换的是全角空格还是半角空格)...

UEditor自定义标题功能修改及链

UEditor自定义标题功能修改发现,UEditor本身给文章加的标题都是h1,但是,seo里面,h1...

ThinkPHP5-ThinkPHP6省市区(县)

ThinkPHP5-ThinkPHP6省市区(县)街道四级联动扩展(json及SQL脚本)省市区县街道sql脚本 ...


  微信小程序开发   西安网站优化   西安建站公司   西安SEO   西安网站SEO优化   西安SEO优化   西安小程序开发

Copyright ©2018-2021 黑米网络 | 网站建设 | XML地图 | 文章 | 地图 | 标签 | www.xaheimi.com | 最新更新: 2021-02-21 20:48:59