`
747017186
  • 浏览: 329890 次
社区版块
存档分类
最新评论

html页面读取图片,延迟加载图片

    博客分类:
  • js
 
阅读更多

最近写了个程序通过流去ftp服务器上去读取一张图片,然后显示出来。由于我读取这个图片之后,要获取这个图片的宽度和高度。但是由于获取图片要一定的时间,图片没有获取完就直接取其高度和宽度。这样显示的宽度和高度都不对。所以需要在图片完全加载完之后再获取。看代码:

/**

等待图片加载完成

*/

function imgLoadEvent(callback, url) {//圖片事件加載

    var img = new Image();

    img.onreadystatechange = function () {

        if (this.readyState == "complete") {

            callback({ "w": img.width, "h": img.height });

        }

    }

    img.onload = function () {

        if (this.complete == true) callback({ "w": img.width, "h": img.height });

    }

 

    img.onerror = function () {

        callback({ "w": 0, "h": 0 });

        //current.autoSetImgSize(current,img,obj);

    }

    img.src = url;

}

 

加载图片

imgLoadEvent(function (obj) {

 w = parseInt(obj["w"]);//图片的宽度

 h = parseInt(obj["h"]); //图片的高度

 }, imageUrl);//imageURL图片的URL

 

这样保证图片完全加载完成。

 

分享到:
评论

相关推荐

    图片延迟加载(imageLazyLoad)

    - **ImagesLazyLoad.htm**:这可能是一个示例HTML页面,展示了如何在实际项目中应用图片延迟加载。它包含了延迟加载的图片元素和必要的JavaScript代码引用。 - **LazyLoad.js**:这是实现图片延迟加载功能的...

    Webpack 实现 AngularJS 的延迟加载

    为了解决这个问题,开发者们通常会采用代码分割(code splitting)和延迟加载(lazy loading)的技术。在本篇文章中,我们将学习如何使用Webpack来实现AngularJS应用的延迟加载。 首先,让我们来看一下什么是延迟...

    图片预加载效果

    3. 懒加载(延迟加载):只有当用户滚动到图片所在位置时才开始加载,适用于长页面或无限滚动的设计。 三、预加载的优缺点 优点: - 提升用户体验,减少用户等待时间。 - 减轻服务器压力,降低带宽消耗。 - 利用...

    images-lazyload:图片延迟加载

    综上所述,图片延迟加载是一种优化网页性能的重要技术,通过合理使用JavaScript和HTML数据属性,可以有效提升页面加载速度,改善用户浏览体验。同时,我们还需要关注其实施细节,不断优化以适应不同场景和设备的需求...

    jquery处理图片预加载

    该插件允许我们延迟加载页面中的非可视区域图片,进一步提升性能。 接下来,我们可以编写jQuery代码来实现预加载功能。这里有一个基本的预加载示例: ```javascript $(document).ready(function() { var images = ...

    jQuery图片延迟加载插件Lazy Load特效代码

    总结来说,jQuery的Lazy Load插件通过延迟加载图片,显著提高了网页性能和用户体验。通过灵活的配置和丰富的功能,开发者可以根据项目需求进行定制,以实现最佳的加载效果。在实际应用中,应结合页面具体情况进行...

    html加载顺序.zip

    3. **延迟加载**:使用懒加载技术,只加载视口内的图片和其他资源。 4. **预加载和预读取**:通过`<link rel="preload">`或`<link rel="prefetch">`提前加载重要资源。 5. **最小化DOM大小**:减少不必要的DOM节点,...

    页面滚动到底部自动加载数据

    为了减少网络延迟,可以考虑使用浏览器缓存或服务端缓存策略,比如在用户首次加载数据时存储在本地,后续滚动加载时优先从本地读取,只有在缓存不足时才向服务器请求。 综上所述,实现“页面滚动到底部自动加载数据...

    js-layzr:图片延迟加载库Layzr

    总之,JS-Layzr是一个强大的图片延迟加载工具,它的简单易用性和高性能使其成为开发者优化网页加载速度的理想选择。结合“js-layzr-master”中的资源,你可以轻松掌握并应用于自己的项目中,提升用户体验。

    js实现延迟加载的几种方法

    JavaScript延迟加载(Lazy Loading)是一种优化网页性能的技术,它的核心思想是只在真正需要时才加载资源,以减少页面初始化时不必要的数据传输,提高页面的加载速度和用户体验。以下是介绍的三种JavaScript延迟加载...

    html2canvas生成图片案例

    值得注意的是,html2canvas并不完美,可能存在一些渲染不准确的情况,例如某些CSS3属性的处理、透明度问题、图片延迟加载等。遇到这些问题时,可能需要查阅官方文档或社区解决方案来优化。 此外,为了处理跨域图片...

    jQuery实现鼠标滚动图片延迟加载效果附源码下载

    jQuery延迟加载图片是一种优化网页性能的技术,特别是在网页包含大量图片时。这种技术旨在减少初始页面加载时间,因为不是一次性加载所有图片,而是当用户滚动页面并接近图片时才开始加载。这样可以显著节省用户的...

    simple-image-preloader:一个简单的网页图片预加载器

    预加载图片可以提前下载这些资源,在页面需要时快速显示,避免用户等待,提高页面的响应速度和流畅性。 2. JavaScript基础: JavaScript是一种广泛使用的客户端脚本语言,常用于网页交互和动态效果。在这个预加载...

    在项目中使用的加载图片

    在项目开发中,加载图片是一项基础且重要的任务,特别是在UI设计和用户体验方面起着关键作用。加载图片不仅可以美化界面,还可以有效地传达信息,提供反馈,甚至优化应用性能。以下是一些关于在项目中使用加载图片的...

    1000张网页常用图片

    这包括减小图片大小(通过压缩工具或调整质量)、使用适当的格式、利用CSS精灵图技术减少HTTP请求、使用懒加载技术延迟非首屏图片的加载等。 4. **响应式设计**:随着移动设备的普及,图片需要适应各种屏幕尺寸。...

    浅谈移动端网页图片预加载方案

    原因可能是iOS系统浏览器在加载图片时会检查服务器上的状态,如果网络断开,即使图片已经存在于缓存中,也可能无法正确显示。 方案二是创建一个包含所有需要显示图片的页面,图片在页面加载时一次性加载完成,然后...

    JQ 获取图片真实宽高

    创建一个隐藏的`<img>`标签加载图片,加载完成后获取尺寸,然后替换掉原来的占位符。 通过以上介绍,我们可以了解到,使用jQuery获取图片真实宽高需要结合图片的加载事件和相应的jQuery方法。在实际应用中,考虑到...

    HTML5图片dataURL转换工具.zip

    dataURL可以避免网络延迟,使图像在页面加载时无需额外请求。 2. **FileReader API**: HTML5的FileReader接口是实现本地文件读取的关键。通过这个API,开发者可以在浏览器环境中读取用户选择的文件,如图片,然后将...

    html 转 图片 html to image

    - 加载HTML:首先读取HTML内容,可以是从文件、数据库或网络获取。 - 渲染HTML:使用WebBrowser控件或其他类似机制,将HTML呈现为可视化的网页。 - 设置尺寸:根据需求调整WebBrowser控件或渲染区域的大小,以...

Global site tag (gtag.js) - Google Analytics