`

js判断图片是否加载完成并获取图片的宽度

阅读更多

做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用javascript中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

(1)第一中方法,通过onload事件,比如:

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
	alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
	document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

 (2)第二种方法,使用 onreadystatechange 来判断

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
	if(this.readyState=="complete"){
		alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
		document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
	}
}
</script>
<div id="mypic">onloading……</div>

 

分享到:
评论

相关推荐

    js判断图片加载完成后获取图片实际宽高的方法

    在这种情况下,可能需要采取其他策略来判断图片是否已经被缓存并决定如何处理。 以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点,我们可以在Web开发中更加灵活和准确地处理图片...

    关于JS判断图片是否加载完成且获取图片宽度的方法

    在JavaScript中,判断图片是否加载完成以及获取图片的宽度是前端开发中常见的需求。这主要应用于处理用户上传图片时可能出现的布局问题,如图片加载不完全导致页面元素尺寸异常。以下将详细介绍两种常用的方法。 ##...

    js或者jquery判断图片是否加载完成实现代码

    ### JavaScript实现图片加载完成监听 在JavaScript中,我们可以利用Image对象的`onload`事件来实现图片加载完成的监听。当图片加载完成时,`onload`事件会被触发,此时我们就可以执行需要在图片加载完成后执行的...

    微信小程序image图片加载完成监听

    接下来,在小程序的js文件中实现imageLoad函数,这个函数将在图片加载完成时被触发。imageLoad函数的参数包含了事件对象,从中可以获取到图片加载完成的宽高信息。示例代码如下: ```javascript Page({ // ... ...

    高度,javascript判断上传图片大小,宽度,高度

    使用`FileReader`的`onload`事件来处理图片加载完成后的操作,如计算宽高和大小检查。同时,还要注意处理可能的错误,例如`onerror`事件。 6. **代码示例**: ```javascript const fileInput = document....

    jQuery实现图片动态加载效果

    4. **检测图片是否在视口内**:使用`$(window).scroll()`监听滚动事件,结合`$(element).is(":visible")`或`Intersection Observer API`来判断图片是否在可视区域内。 5. **AJAX请求加载图片**:当图片进入视口时,...

    js和jquery如何获取图片真实的宽度和高度

    以下将详细讲解JavaScript(JS)和jQuery如何获取图片真实尺寸,并提供相应的解决方案。 ### 1. 何时需要获取图片真实尺寸 - **判断图片比例**:在PC端,为了实现不同类型的图片展示效果(如横图或竖图),需要...

    JavaScript实现图片自动加载的瀑布流效果_.docx

    - `img`元素的宽度设置为固定的150px,`box_img`类添加内边距和阴影效果,`box`类有内边距但无外边距,这样由图片宽度和内边距共同决定`.box`的宽度。 - 盒子间的间距通过`.box_img`的内边距模拟,而不需要在`.box...

    JS图片懒加载的优点及实现原理

    2. JavaScript代码首先在页面加载完毕时执行,获取所有img标签,并定义一个lazyLoading函数用于检查图片是否进入视窗。 ```javascript window.onload = function() { let imgs = document.getElementsByTagName...

    图片等比例缩放,动态加载

    通过监听`window.onscroll`事件,可以判断图片是否进入视口。一旦图片距离窗口顶部的距离小于某个阈值,就触发图片的加载。 2. **Intersection Observer API**: 这是浏览器提供的一个新API,用于高效地检测元素...

    javascript图片延迟加载实现方法及思路

    - 如何判断图片是否在可视区域内:一个名为contains的函数被用来判断图片是否与可视区域相交。 - 如何检测web页面中的css文件和javascript脚本是否加载完成:分别利用link节点的sheet属性,img标签的complete属性...

    JS实现图片预加载无需等待

    JavaScript实现图片预加载无需等待的核心思想是通过编程预先加载图片资源,以减少用户等待图片加载的时间,提高浏览体验。这一技术在网站开发中尤为重要,尤其是在图片数量较多的页面中。传统方法是每个页面只显示...

    JavaScript实现图片懒加载(Lazyload)

    在进行图片懒加载的代码实现前,我们需要了解一些基本的高度概念,比如`documentElement.scrollTop`、`offsetTop`、`documentElement.scrollLeft`和`offsetLeft`,这些属性和方法在判断图片是否进入可视区时非常有用...

    Javascript判断图片尺寸大小实例分析

    1. JavaScript判断图片尺寸的基本方法: 在JavaScript中,我们通常可以通过创建一个新的Image对象来加载并获取图片的尺寸。例如,使用以下代码段创建了一个Image对象并设置了其src属性,这个过程是异步的: ```...

    【JavaScript源代码】如何使用Node.js判断png图片是否存在透明像素.docx

    ### 使用Node.js判断PNG图片是否存在透明像素 #### 引言 在进行图片处理时,我们经常需要考虑不同格式之间的转换及优化。PNG格式因其支持透明度而被广泛应用于需要高质量图像的场景,但这种特性也使得PNG文件体积...

    jquery图片延迟加载

    jQuery Lazyload通过监听滚动事件来判断图片是否进入视口。当图片距离页面顶部的距离小于浏览器的可视区域高度时,它会替换`data-src`为`src`,从而触发图片的实际加载。这个过程可以避免一次性加载所有图片,而是按...

    原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果

    - 首先,我们需要获取所有的图片元素,并计算它们的宽度和间距,以确定每列的宽度。可以使用`window.innerWidth`获取屏幕宽度,然后根据列数分配空间。 - 然后,我们可以使用原生的`addEventListener`监听滚动事件...

Global site tag (gtag.js) - Google Analytics