JS加载与获取远程图片

最新推荐文章于 2025-03-28 22:13:24 发布

原创

最新推荐文章于 2025-03-28 22:13:24 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #HTML #Google #浏览器 #ViewUI

本文介绍了一种使用JavaScript动态创建Image对象并加载远程图片的方法。通过设置img.src属性预加载图片，然后利用onload事件确保图片加载完成后再进行显示。在图片加载期间，可以显示占位文本，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=utf-8" />
  <title>JS加载与获取远程图片大小</title>
</head>
<body>
<input id="path" value="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" style="width:400px" /><button onclick="loadpic($('prev'),$('path').value)">加载</button><button onclick="getImgSize($('path').value);">获取大小</button>
<div id="prev"></div>
<script type="text/javascript">
var $=function(id){
	return document.getElementById(id);
}
function loadpic(holder,url){
	holder.innerHTML='正在加载...';
	var img=new Image();
	img.src=url;
	var imgElem=document.createElement('img');
	var dick=setInterval(function(){
		if(img.complete){
			clearInterval(dick);
			holder.innerHTML='';
			imgElem.src=img.s