//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function Imagess(url,imgid,callback){
var val=url;
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
callback(img,imgid);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback(img,imgid);
}
}
}
//如果因为网络或图片的原因发生异常,则显示该图片
img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
img.src=val;
}
//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片,并且指定显示的位置
window.onload=function(){
Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/01cf20088f9506f063d98653.jpg","img1",checkimg);
Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/7b7b19c70d62f4fdd0006050.jpg","img2",checkimg);
Imagess("http://hiphotos.baidu.com/joanne728/pic/item/892557641806d20eaa184c71.jpg","img3",checkimg);
Imagess("http://www.neocha.com/-/res/Camilla/20071204181216078845_h.jpg","img4",checkimg);
Imagess("http://www.neocha.com/-/res/Camilla/20071204181216d078845_h.","img5",checkimg);
}
</script>
<img id="img1" src="loading.gif" width="100" height="100" />
<img id="img2" src="loading.gif" width="100" height="100" />
<img id="img3" src="loading.gif" width="100" height="100" />
<img id="img4" src="loading.gif" width="100" height="100" />
<img id="img5" src="loading.gif" width="100" height="100" />
分享到:
相关推荐
一旦图片加载完成,`Image`对象的`onload`事件将被触发,在这个事件中,可以通过`Image`对象的`width`和`height`属性获取图片的实际宽度和高度。 下面是一个具体的代码示例: ```javascript var test = document....
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。 一、load事件 [removed] $('img').onload = function() { //code } ...
Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、示例代码.
今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。 一、普通方法 监听 img 的 load 方法,每 load 一张图片比较一次。关键代码如下: var num = $img.length; $...
在IE浏览器中,判断图片加载成功是一个常见的需求,特别是在网页开发或者进行性能优化时。这个需求通常涉及到JavaScript的事件处理和浏览器兼容性问题。本文将深入探讨如何在IE中实现图片加载成功的判断,并提供相关...
以下是使用onload事件判断图片加载完成的示例代码: ```html <img class="pic1" onload="get(this)" src="" style='display:none'/> function get(ts) { ts.style.display='block'; // 显示图片 } ``` **优点...
这需要获取图片的位置信息和浏览器的滚动位置,然后通过计算判断图片是否已经进入可视区域。 ### 2. 实现方式 #### 2.1 事件监听 懒加载通常使用`scroll`或`Intersection Observer API`来监听用户的滚动行为。`...
这有助于确保图片完全显示或执行依赖于图片加载完成的其他操作。以下是一些常用的方法,适用于不同的浏览器环境: 1. **onload事件**: 这是W3C推荐的标准方法,适用于所有现代浏览器。当图片加载完成后,`onload`...
当图片加载完成后,`onload`函数会被调用,弹出图片的宽度和高度,并将图片插入到ID为`mypic`的`div`中。 ### 方法二:使用`onreadystatechange`事件 另一种方法是使用`onreadystatechange`事件,这个事件在图像...
2. **优化用户体验**:用户无需等待全部图片加载完毕,页面可更快呈现,提升浏览体验。 3. **节省网络资源**:对于移动设备用户,尤其是流量有限的用户,图片延迟加载能有效减少数据消耗。 4. **搜索引擎优化**:更...
为了解决这个问题,可以使用 Image 对象的 complete 属性来判断图片是否已经载入成功。 例如: ``` function loadImage(url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback...
这个插件由David Desmaisons创建,旨在解决Web应用中图片加载的问题,特别是那些需要在图片加载完成后执行某些操作(如布局调整、动画效果等)的情况。Vue.js是一款流行的轻量级前端框架,它提倡声明式编程,使...
一旦图片加载完成,其`width`和`height`属性将被设置为实际的像素值。如果图片加载失败,这些属性通常会被设置为0。因此,我们可以通过检查`img.width`是否为0来判断图片是否加载成功。 3. **示例代码**: 以下是...
通过为图片元素添加一个onload事件处理器,我们可以在图片加载完成后执行相应的代码。例如: ```html <img id="img1" src="***"> img1.onload = function() { // 这里代码会在图片加载完成后执行 console.log('...
这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法,这些方法有助于优化用户体验,特别是对于那些依赖大量图片的网页。 1. **onload事件** `onload`事件是在元素(如`<img>`)的资源加载完成后触发的。...
console.log('图片加载完成', img.width, img.height); // 在此处可以执行基于图片尺寸的操作,如布局调整等 }; img.src = 'path/to/image.jpg'; // 设置图片地址 ``` 上述代码中,我们首先创建了一个Image对象,...
在实际开发中,可以结合使用`jQuery(document).ready()`和`window.onload()`来处理页面的初始化操作和图片加载完成后的逻辑。此外,还有一种直接利用图片元素的`load`事件的方法,通过为每个图片元素绑定`load`事件...
否则,我们将监听`onload`事件,当图片加载完成后异步调用回调。 预加载可以应用于多个图片,例如: ```javascript var urls = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg']; urls.forEach(function(url) {...
- **响应式设计**:考虑到不同设备的屏幕大小,可能需要调整判断图片是否在可视区域内的逻辑。 通过以上介绍,我们理解了jQuery实现图片延迟加载的基本原理和操作步骤。在实际项目中,根据具体需求,我们可以灵活地...