html异步加载图片,javascript-img异步加载图片

在开发中,我们经常有异步加载图片的请求,然后在图片加载成功后做一些操作,一般我们通过onload方法来实现.网上有两种写法,大家可以先看一下(注:logo.jpg是张本地图片):

例子1:

var img = new Image();

img.src = "logo.jpg";

img.onload = function () {

alert("image is loaded");

};

document.body.appendChild(img);

例子2:

var img = new Image();

img.onload = function () {

alert("image is loaded");

};

img.src = "logo.jpg";

document.body.appendChild(img);

发现什么了没有?上面两个例子最大的差别就在于onload和src赋值的先后顺序.那么onload和src赋值的先后顺序会在实际中产生什么差别呢?

产生这个问题的原因很简单,就是因为logo.jpg是本地图片,导致浏览器加载起来非常快,几乎在给img赋值src的时候,图片就已经加载完成,同时触发了onload事件,代码中为onload赋值的语句就相当于在onload事件发生后,这时候已经晚了.

将src写到了onload的前面,会导致onload来不及赋值就被执行了,所以正确的写法应该是第2个例子.既在给图片分配地址前,先绑定好它的onload事件,这样就不用担心错过时机的问题了.

正确的例子：

var img = new Image();

// 如果文档装入完成后加载用window load

//window.addEventListener("load" , function(){

// document.body.appendChild(img);

//} , false);// 如果图片加载完毕用 img load

img.addEventListener('load', function(){

document.body.appendChild(img);

} , false);img.src = 'test.png';

html异步加载图片,javascript-img异步加载图片相关推荐

HTML如何变换背景图片,javascript如何更改网页背景图片？
JavaScript中更改网页背景图片可以通过style对象的backgroundImage属性来实现.语法为Object.style.backgroundImage=url(URL). JavaSc ...
java 无法加载资源,JavaScript：无法加载资源：服务器响应状态为404（未找到）
我处理 JavaScript 应用程序,该应用程序在 https://localhost:63342/WalletClient/index.html_ijt=k4ock08pqsve8hb7b2b34 ...
iOS开发swift版异步加载网络图片(带缓存和缺省图片)
iOS开发之swift版异步加载网络图片与SDWebImage异步加载网络图片的功能相似,只是代码比较简单,功能没有SD的完善与强大,支持缺省添加图片,支持本地缓存. 异步加载图片的核心代码如下: ...
android listview 图片闪烁,listView异步加载图片导致图片错位、闪烁、重复的问题的解决...
androidListView是android中重要的控件,几乎每一个项目都会用到.但是在使用中我们避免不了会出现一些问题,包括一些滑动事件的处理,例如:ListView中嵌套scrollView, ...
java 多线程数据异步加载图片_JAVA多线程超时加载当网页图片
先上图: 这一次没有采取正则匹配,而采取了最简单的java分割和替代方法进行筛选图片它能够筛选如下的图片并保存到指定的文件夹如: "http://xxxx/xxxx/xxx.jpg&qu ...
php+js实现异步图片上传,JavaScript实现异步图像上传功能
当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成.本文的重点是在图像上传至服务器时使用JavaScript立即显示图像. 介绍当使用JavaScript将图像 ...
cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
dede文章异步ajax加载,织梦DedeCMS列表“加载更多”“无限下拉”Ajax加载使用方法...
Infinite Ajax Scroll 简称 ias,无限的ajax滚动,是一款jQuery滚动ajax分页插件,当页面滚动到容器可见部分将自动异步加载数据. 下面先来看看效果. 无限下拉效果点击 ...
html 加载高德地图,vue异步加载高德地图
几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的 ...
php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...

html异步加载图片,javascript-img异步加载图片

html异步加载图片,javascript-img异步加载图片相关推荐

最新文章

热门文章