js判断背景图片是否加载成功使用img的width实现

非背景图片可以用img的onerror 来判断,但是背景图片呢,刚无意中发现一个方法,目测可行,但不确定是否始终可行。


代码如下:

var img=new Image();
img.src="图片地址";
if(img.width==0){//表示图片加载失败了}
else{//成功了}

这方法一般情况下可行,但是为测试过图片很大或者加载速度很慢的时候是否可行。

赞 (0)

相关推荐

  • js实现按钮加背景图片常用方法

    本文实例讲述了js实现按钮加背景图片常用方法.分享给大家供大家参考.具体实现方法如下: 方法一: 复制代码 代码如下: <input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/> 方法二: 复制代码 代码如下: <input type="button" value="提交" style="background:

  • JS实现让网页背景图片斜向移动的方法

    本文实例讲述了JS实现让网页背景图片斜向移动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现让网页背景图片斜向移动</title> <body background="images/changshi.ico"> <script language="Javascript"> <!-- function selectAl

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • js实现鼠标感应图片展示的方法

    本文实例讲述了js实现鼠标感应图片展示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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&qu

  • 使用js操作css实现js改变背景图片示例

    1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/

  • js实现鼠标触发图片抖动效果的方法

    本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> //configure shake degr

  • js实现背景图片感应鼠标变化的方法

    本文实例讲述了js实现背景图片感应鼠标变化的方法.分享给大家供大家参考.具体分析如下: 鼠标点击后背景图片变化,点击另外一个菜单项前面的会自动恢复背景,其实这个如果单纯使用CSS是没办法做的,我们还要使用JS来判断鼠标状态,代码如下: <style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#0000

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!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> <title>背景切

  • JS实现跟随鼠标闪烁转动色块的方法

    本文实例讲述了JS实现跟随鼠标闪烁转动色块的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS跟随鼠标闪烁转动的色块</title> </head> <body> <script language="JavaScript"> <!-- if (document.all){ colours=new Array('ff0000','00

  • js判断背景图片是否加载成功使用img的width实现

    非背景图片可以用img的onerror 来判断,但是背景图片呢,刚无意中发现一个方法,目测可行,但不确定是否始终可行. 复制代码 代码如下: var img=new Image(); img.src="图片地址"; if(img.width==0){//表示图片加载失败了} else{//成功了} 这方法一般情况下可行,但是为测试过图片很大或者加载速度很慢的时候是否可行.

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • js实现网页图片延时加载 提升网页打开速度

    js实现网页图片延时加载 提升网页打开速度

    提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术

  • js 一个关于图片onload加载的事

    首先先明确一下我要的目的: 当用户进入页面的时候,显示loading 加载图标,等最大的图片加载之后再opacity 图片; 功能很简单,但是很蛋疼的是,我没完全做出来: 在做的时候,第一时间我自然想到了如下的方法: 复制代码 代码如下: $(function(){    $('.banner img').load(function(){        console.log('已经加载')        });}); 熟话说的好呀,自信心太膨胀,到头来打击很大了:我以为这样就可以了,然后看了一

  • 基于javascript实现图片预加载

    一.定义 预加载图片是提升用户体验的一个好办法,提前加载用户所需的图片,保证图片快速.无缝发布,使用户在浏览器网站时获得更好用户体验.常用于图片画廊等应用中. [注意]若使用即时加载,加载的图片与页面的其他内容一起加载会增加页面的整体加载时间,所以使用window.onload比较合适. 二.两种思路 1.使用背景图像 使用页面无用元素的背景图片预加载 <style> body{ margin: 0; } img{ width: 100px; height: 100px; } ul{ marg

  • JS判断图片是否加载完成方法汇总(最新版)

    JS判断图片是否加载完成方法汇总(最新版)

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧. 一.load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 二.jquery方法 <script

  • 基于JS判断iframe是否加载成功的方法(多种浏览器）

    推荐阅读: JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,

  • IE及IE6浏览器中判断JS文件加载成功失败的方法

    浏览器的文件加载实际上是有非常纠结的兼容问题的.最近看到@lifesinger做了一个具体的总结.这里比较麻烦的是IE6~8不区分加载成功或失败,都走一个回调.在网上看了一种解决方案是,在加载文件的最后置一个全局变量或改变标签的属性来区分,这样成功与否就通过这个标志位判断.但显然不太完美,还要改加载文件. 后来尝试另一种思路,先创建一个vbscript,src置成一个JS文件,如这个文件加载正常,肯定会报错否则不会有反应.这样如果window.onerror捕获到错误了,说明文件有效,再正常加载

  • JS实现判断图片是否加载完成的方法分析

    本文实例讲述了JS实现判断图片是否加载完成的方法.分享给大家供大家参考,具体如下: 1.onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <img src="images/background.png"> <p>loading...</p> <script type=&qu

  • js 判断图片是否加载完以及实现图片的预下载

    创建一个Image对象,实现图片的预下载,如果图片已经存在于浏览器缓存,直接调用回调函数,使用onload事件可以判断图片是否加载完成 function loadImage(url, callback) { var img = new Image(); //创建一个Image对象,实现图片的预下载 img.src = url; if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 callback.call(img); return; // 直接返回,不用再

随机推荐