经典代码:
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提供了一些方法来改变图片的尺寸，如`width()`和`height()`用于获取或设置元素的宽度和高度，以及`css()`方法可以设置CSS样式，包括`width`和`height`属性。例如： ```javascript $('img').css({ 'width': '...
`wx.request`用于向服务器请求图片资源的URL，`wx.getImageInfo`则用来获取图片的详细信息，如宽度、高度以及是否已加载成功等。 使用`wxapp-preload`时，首先需要在小程序的代码中引入这个库，然后定义要预加载的...
1. **获取图片和容器尺寸**：首先，我们需要获取图片的原始尺寸和容器的宽度或高度。可以通过`width()`和`height()`方法获取： ```javascript var imgWidth = $("#yourImage").width(); var imgHeight = $("#your...
- 对于图片和图标，可以使用预加载技术提前加载，以减少用户等待时间。同时，使用Progress API创建进度条，提升用户体验。 - 创建一个资源加载进度模板，可以是全局的，也可以是针对特定模块的，当资源加载时，...
4. **图片预加载**：根据窗口大小预测需要显示的图片，提前加载。 六、性能优化 频繁地获取和计算窗口尺寸可能导致性能问题，尤其是在使用`resize`事件时。为了优化，可以使用`requestAnimationFrame`或`...
"JQ 获取图片真实宽高"这个标题指的是使用jQuery来获取图片在页面加载完成后的真实宽度和高度，因为图片在未完全加载前，其宽度和高度可能是未知的。下面我们将深入探讨如何实现这一功能，并了解相关的知识点。 1. ...
在onload事件触发时，可以通过回调函数来获取图片的宽度和高度属性，从而确保图片尺寸的正确性。 然而，在某些浏览器中，例如IE6和Opera，存在兼容性问题。如果图片已经缓存，那么再次请求相同URL的图片时，浏览器...
在加载图片之前，需要预加载图片，以便获取图片的高度和宽度。可以使用 JavaScript 的 Image 对象来预加载图片，并获取图片的高度和宽度。 ### 2.3 实现瀑布流效果 要实现瀑布流效果，需要将图片按照一定的顺序...
在Web开发中，获取网络图片的尺寸是一个常见需求，特别是在进行图片预加载处理时。传统的做法可能涉及直接加载图片然后获取其尺寸属性，但这种做法可能会导致页面的布局发生变化。为此，文章提出了一种变通方法，...
jQuery 图片预加载和自动等比例缩放插件是一种优化网页加载体验的工具，它能够有效地提高用户体验，尤其是在处理大量图片的网页上。这个插件的主要功能是在图片真正加载之前显示一个加载图标，等到图片完全下载完毕...
这篇文章将深入探讨如何使用JavaScript在IE9中获取图片的宽度和高度。我们还将提供一个示例代码，帮助你更好地理解这个过程。 首先，我们需要了解在IE9之前的版本中，`img`元素的`width`和`height`属性在图片未完全...
在这里，我们更新`canvas`的宽度和高度以匹配图片的尺寸，然后调用`drawImage`方法在画布上绘制图片。`drawImage`接受多个参数，如源图像、起始绘制位置等，这里我们将图片的左上角设为画布的原点(0,0)。 最后，...
预解释（pre-parsing）是一种技术，用于提前解析图像数据，以便系统可以了解图像的元信息，如宽度、高度和格式，而无需完全加载图像。这可以在实际显示图像之前进行，减少了用户等待的时间。在QML中，我们可以通过...
可以采用预加载、懒加载等策略，比如只在需要时加载图片，或者提前加载用户可能看到的图片。 通过上述方法，开发者可以有效地管理图片资源，降低内存消耗，提高应用的稳定性和用户体验。在实际开发中，要根据项目...
`wx.getImageInfo()`可用于预加载图片，并获取图片的宽度和高度，以便在显示时进行适配。 4. **图片适应性处理**： - 根据屏幕尺寸和设备像素比，动态调整图片的显示尺寸，避免加载过大图像。 - 使用CSS的`...
这篇JavaScript学习笔记主要介绍了如何使用类似jQuery的封装方式来实现图片的等比缩放和预加载功能。在实际网页开发中，图片的显示效果和加载速度对于用户体验至关重要，因此掌握这两种技术是十分必要的。 首先，...
1. 计算元素大小：根据不同的屏幕尺寸和图片宽高比，计算出合适的元素宽度和高度。 2. 布局计算：当新图片加载时，调整瀑布流布局，确保元素能正确地排列在合适的位置。 3. 事件监听：监听滚动事件，当滚动到底部时...
- **图片延迟加载**：如果图片设置了懒加载或者预加载策略，需要额外处理这些情况，确保图片真正加载完成后再执行尺寸获取逻辑。 - **兼容性问题**：虽然大多数现代浏览器都支持`<img>`元素的`width`和`height`属性...
`Android-FastImageSize`库就是为了满足这一需求而设计的，它允许开发者在不完全下载图片的情况下，快速获取到网络图片的宽度和高度信息。这对于优化用户体验、减少不必要的数据传输以及提高应用性能至关重要。 `...
- 首先，我们需要获取所有的图片元素，并计算它们的宽度和间距，以确定每列的宽度。可以使用`window.innerWidth`获取屏幕宽度，然后根据列数分配空间。 - 然后，我们可以使用原生的`addEventListener`监听滚动事件...