`
rayln
  • 浏览: 433972 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

图片预加载获取高度和宽度

 
阅读更多
经典代码:
var imgLoad = function (url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};


直接看例子代码: (请看注解)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/ui/js/jquery.min.js"></script>
</head>
<script>
$(function(){
	
	var img = new Image();
	img.src = "http://www.planeart.cn/demo/imgReady/vistas24.jpg?1324093188902";
	$("#offimg").append(img);
	/***********提前获取图片的高度和宽度***********/
	var width = img.offsetWidth;
	var height = img.offsetHeight;
	var intervalId;
	var getPicture = function(){
		console.log("width:"+width+"  height:"+height);
		if(width != img.offsetWidth && height != img.offsetHeight){
			console.log("actualy"+" width:"+img.offsetWidth+"  height:"+img.offsetHeight);
			$("#offimg").remove();
			clearInterval(intervalId);
		}
	}
	intervalId = setInterval(getPicture,150);
	/**********************/
	/*********判断图片是否读取完毕*************/
	if(img.complete){//是否缓存读取
		console.log("======com======");
		console.log("img.width:"+img.width+"   img.height:"+img.height);
		$("#img").append(img);
	}else{
		img.onload = function(e){//图片加载完毕
			console.log("======load======");
			console.log(e);
			console.log("img.width:"+img.width+"   img.height:"+img.height);
			$("#img").append(img);
		}
	}
	/**********************/
	
});
</script>
<body>
	<div id="img"></div><div id="offimg"></div>
</body>
</html>
分享到:
评论

相关推荐

    jquery实现图片预加载技术,使得图片加载更为流畅,和谐。

    jQuery提供了一些方法来改变图片的尺寸,如`width()`和`height()`用于获取或设置元素的宽度和高度,以及`css()`方法可以设置CSS样式,包括`width`和`height`属性。例如: ```javascript $('img').css({ 'width': '...

    wxapppreload微信小程序图片预加载

    `wx.request`用于向服务器请求图片资源的URL,`wx.getImageInfo`则用来获取图片的详细信息,如宽度、高度以及是否已加载成功等。 使用`wxapp-preload`时,首先需要在小程序的代码中引入这个库,然后定义要预加载的...

    手机端h5页面适配+预加载+获取资源加载进度模板

    - 对于图片和图标,可以使用预加载技术提前加载,以减少用户等待时间。同时,使用Progress API创建进度条,提升用户体验。 - 创建一个资源加载进度模板,可以是全局的,也可以是针对特定模块的,当资源加载时,...

    使用jQuery实现图片预加载和自动等比例缩放插件

    1. **获取图片和容器尺寸**:首先,我们需要获取图片的原始尺寸和容器的宽度或高度。可以通过`width()`和`height()`方法获取: ```javascript var imgWidth = $("#yourImage").width(); var imgHeight = $("#your...

    javascript获取网页高度宽度.rar

    4. **图片预加载**:根据窗口大小预测需要显示的图片,提前加载。 六、性能优化 频繁地获取和计算窗口尺寸可能导致性能问题,尤其是在使用`resize`事件时。为了优化,可以使用`requestAnimationFrame`或`...

    JQ 获取图片真实宽高

    "JQ 获取图片真实宽高"这个标题指的是使用jQuery来获取图片在页面加载完成后的真实宽度和高度,因为图片在未完全加载前,其宽度和高度可能是未知的。下面我们将深入探讨如何实现这一功能,并了解相关的知识点。 1. ...

    vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解).docx

    在加载图片之前,需要预加载图片,以便获取图片的高度和宽度。可以使用 JavaScript 的 Image 对象来预加载图片,并获取图片的高度和宽度。 ### 2.3 实现瀑布流效果 要实现瀑布流效果,需要将图片按照一定的顺序...

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

    在onload事件触发时,可以通过回调函数来获取图片的宽度和高度属性,从而确保图片尺寸的正确性。 然而,在某些浏览器中,例如IE6和Opera,存在兼容性问题。如果图片已经缓存,那么再次请求相同URL的图片时,浏览器...

    js 获取网络图片的高度和宽度的实现方法(变通了下)

    在Web开发中,获取网络图片的尺寸是一个常见需求,特别是在进行图片预加载处理时。传统的做法可能涉及直接加载图片然后获取其尺寸属性,但这种做法可能会导致页面的布局发生变化。为此,文章提出了一种变通方法,...

    jquery 图片预加载 自动等比例缩放插件

    jQuery 图片预加载和自动等比例缩放插件是一种优化网页加载体验的工具,它能够有效地提高用户体验,尤其是在处理大量图片的网页上。这个插件的主要功能是在图片真正加载之前显示一个加载图标,等到图片完全下载完毕...

    cpp-QML中Image控件升级版利用预解释和预读取提升图片加载速度

    预解释(pre-parsing)是一种技术,用于提前解析图像数据,以便系统可以了解图像的元信息,如宽度、高度和格式,而无需完全加载图像。这可以在实际显示图像之前进行,减少了用户等待的时间。在QML中,我们可以通过...

    IE9浏览器下 使用JS获取图片尺寸大小 的方法

    这篇文章将深入探讨如何使用JavaScript在IE9中获取图片的宽度和高度。我们还将提供一个示例代码,帮助你更好地理解这个过程。 首先,我们需要了解在IE9之前的版本中,`img`元素的`width`和`height`属性在图片未完全...

    【JavaScript源代码】JavaScript canvas实现加载图片.docx

    在这里,我们更新`canvas`的宽度和高度以匹配图片的尺寸,然后调用`drawImage`方法在画布上绘制图片。`drawImage`接受多个参数,如源图像、起始绘制位置等,这里我们将图片的左上角设为画布的原点(0,0)。 最后,...

    加载图片到内存

    可以采用预加载、懒加载等策略,比如只在需要时加载图片,或者提前加载用户可能看到的图片。 通过上述方法,开发者可以有效地管理图片资源,降低内存消耗,提高应用的稳定性和用户体验。在实际开发中,要根据项目...

    小程序源码 加载本地图片,绝对不会出现OOM.rar

    `wx.getImageInfo()`可用于预加载图片,并获取图片的宽度和高度,以便在显示时进行适配。 4. **图片适应性处理**: - 根据屏幕尺寸和设备像素比,动态调整图片的显示尺寸,避免加载过大图像。 - 使用CSS的`...

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    这篇JavaScript学习笔记主要介绍了如何使用类似jQuery的封装方式来实现图片的等比缩放和预加载功能。在实际网页开发中,图片的显示效果和加载速度对于用户体验至关重要,因此掌握这两种技术是十分必要的。 首先,...

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

    1. 计算元素大小:根据不同的屏幕尺寸和图片宽高比,计算出合适的元素宽度和高度。 2. 布局计算:当新图片加载时,调整瀑布流布局,确保元素能正确地排列在合适的位置。 3. 事件监听:监听滚动事件,当滚动到底部时...

    js获取图片长和宽度的代码

    - **图片延迟加载**:如果图片设置了懒加载或者预加载策略,需要额外处理这些情况,确保图片真正加载完成后再执行尺寸获取逻辑。 - **兼容性问题**:虽然大多数现代浏览器都支持`&lt;img&gt;`元素的`width`和`height`属性...

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

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

    Android-FastImageSize是一个不需要完全下载就可以快速获得网络图片宽高尺寸信息的androidlib

    `Android-FastImageSize`库就是为了满足这一需求而设计的,它允许开发者在不完全下载图片的情况下,快速获取到网络图片的宽度和高度信息。这对于优化用户体验、减少不必要的数据传输以及提高应用性能至关重要。 `...

Global site tag (gtag.js) - Google Analytics