`
jamm19860411
  • 浏览: 86606 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

动态图片加载

阅读更多
var myImg=new Image;
myImg.src="img Url";
image具有complete属性 。该属性在图片加载过程中都返回false;只有图片加载成功才会返回true。

firefox实现了complete属性,而ie实现了complete属性和readyState属性
但是两者对属性的定义不同:
firefox : 一个图像被下载完毕,complete 属性就是true,没有下载完毕则为false
IE :一个图像没有被下载完毕,则readyState 属性为uninitialized,complete属性是false.当下载完毕时, readyState为complete,而如果此时图片还没有显示,complete为false,显示以后(display:block)此属性才变成true



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Document</title>
<script type="text/javascript">
<!--
function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象,实现图片的预下载
    img.src = url;
  
    if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
        document.getElementById("good").innerHTML += "<img src = '" +  url +  "'>"
alert(111)
        return; // 直接返回,不用再处理onload事件
    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。
alert(22)
        document.getElementById("good").innerHTML += "<img src = '" +  url +  "'>"//将回调函数的this替换为Image对象
    };
};
//-->
</script>
</head>
<body>
<input type="button" value="click me" onclick = "loadImage('http://www.baidu.com/img/baidu_logo.gif')"/>
<div id="good"></div>
</body>
</html>
分享到:
评论

相关推荐

    几种jQuery动态图片加载效果

    jQuery作为一款强大的JavaScript库,提供了丰富的API和插件来实现各种动态图片加载效果。本文将深入探讨几种使用jQuery实现的动态图片加载效果,并提供相关的代码示例。 1. **渐进式加载(Lazy Loading)** 渐进式...

    jQuery动态图片加载代码.zip

    在网页开发中,动态图片加载是一项重要的技术,它能够提高用户体验,优化页面加载速度,特别是对于含有大量图片的网站来说更为关键。这个"jQuery动态图片加载代码.zip"压缩包提供了一个实用且美观的解决方案,适合...

    几种jQuery动态图片加载效果.zip

    《jQuery动态图片加载效果详解与应用》 在Web开发中,图片加载效果是提升用户体验的重要一环,尤其在页面内容丰富、图片众多的情况下。jQuery,作为一款强大的JavaScript库,提供了丰富的API和插件,使得实现各种...

    php的imagick给动态图片添加文字水印

    在本篇文章中,我们将深入探讨如何使用`Imagick`在动态图片上添加文字水印。 首先,确保您的服务器环境已经安装了`Imagick`扩展。在Linux系统中,通常可以通过运行`apt-get install php-imagick`或`yum install ...

    gride加载动态图片

    通过分析和学习这个示例,你可以了解如何将上述理论知识应用到实践中,包括设置Grid布局、集成动态图片加载库、调整图片加载策略等。 总的来说,"gride加载动态图片"涉及到了前端布局、图片处理、性能优化等多个...

    水晶报表-动态加载图片

    水晶报表动态加载图片技术详解 水晶报表是一种常用的报表生成工具,但是在实际应用中,,我们经常需要在报表中加载图片,但是水晶报表并不支持直接加载图片文件。为了解决这个问题,我们可以使用动态加载图片的技术...

    jquery 滚动条动态图片加载(模拟淘宝商城图片加载)

    用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...

    android加载动态图片框架

    在Android开发中,动态图片加载是一项常见的需求,例如在社交应用、游戏或者动画展示中。Android加载动态图片框架就是为了解决这个问题而设计的。本文将深入探讨Android平台上的动态图片加载技术,以及如何利用一个...

    jquery滚动条动态图片加载.rar

    用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...

    jQuery动态的图片加载插件.zip

    jQuery动态图片加载插件是一种广泛应用于网页开发中的技术,它能有效地优化网页性能,提高用户体验。在网页中,特别是含有大量图片的页面,如果一次性加载所有图片,可能会导致页面加载速度慢,用户需要等待较长的...

    flex加载动态图片

    flexBulider页面加载动态图片的显示

    DevExpress GridControl控件加入图片列动态加载图片

    5. **优化性能**:为了提高用户体验,确保在数据量大时图片加载不会拖慢UI。可以使用懒加载策略,只在单元格进入可视区域时加载图片。此外,可以考虑使用较小的图片尺寸或使用SVG等矢量图格式来减少资源大小。 6. *...

    Android用RecyclerView实现动态添加本地图片

    然后,我们在onBindViewHolder方法中将图片加载到ImageView中。 五、总结 本文详细介绍了如何使用RecyclerView实现动态添加本地图片,包括图片选择library的选择、图片选择界面的实现、获取选择的图片、...

    wpf加载gif动态图片

    在WPF(Windows Presentation Foundation)框架中,加载GIF动态图片并不是像静态图片那样简单,因为GIF格式的动画特性需要特殊处理。然而,通过一些技巧和特定的库,我们确实可以只用一行代码轻松地在WPF应用中实现...

    jQuery实现图片动态加载效果

    本文将详细讲解如何使用jQuery来实现这一功能,尤其关注鼠标滚动时的图片加载效果。 首先,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。在实现图片动态加载时,我们主要利用...

    android 动态添加图片

    在Android开发中,动态添加图片是一项常见的需求,例如在创建社交动态、编辑个人资料或实现图片选择器等场景。本文将深入探讨如何在Android应用中实现动态添加图片,并结合提供的`multiimagechooser-master`项目进行...

    VC Picture控件动态加载图片文件

    当你需要在程序运行时根据用户的选择或程序逻辑动态加载不同的图片文件时,可以借助于BitBlt函数来实现。本文将深入探讨如何利用VC Picture控件动态加载图片文件,并介绍BitBlt方法的工作原理。 首先,我们需要理解...

    动态图片实现添加水印功能

    在IT行业中,动态图片添加水印是一项常见的图像处理任务,主要应用于品牌保护、版权声明或者增加视觉效果。本文将深入探讨如何使用Java编程语言来实现这个功能,特别关注如何在动态GIF图片上添加水印。 首先,我们...

    wpf加载图片到datagrid动态控件

    在开发WPF应用程序时,有时候我们需要将图片数据展示在数据网格(DataGrid)中,以提供更丰富的用户体验。...如果你想要查看示例代码的完整实现,可以参考提供的`wpf_动态图片加载datagrid`压缩包文件。

    MFC动态加载和静态加载bmp类型图片

    在静态加载中,首先需要在资源编辑器中添加BMP图片,为其分配一个ID,如 IDR_BITMAP1。然后在代码中,可以这样加载图片: ```cpp CBitmap bitmap; if (!bitmap.LoadBitmap(IDR_BITMAP1)) { // 错误处理,加载失败 ...

Global site tag (gtag.js) - Google Analytics