js 怎么让图片加载完成后才执行下面代码?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 怎么让图片加载完成后才执行下面代码?相关的知识,希望对你有一定的参考价值。

var img = new Image();
img.src = “image图片”;
img.onload = function () //等待图片加载完成后才执行下面
//下面执行

也就是说,onload实现同步执行效果

要把图片当成是图片对象才行;


var a=new Image(); //这个是原生的JS实例化


a.src=arr[shownum++].url;

然后Image对象有一个属性“onload”,这个就是加载完成,当加载完成之后你可以执行一个函数比如


a.onload=function()


alert("完成加载");




这样当你的图片加载完成后就执行下面的函数了。

相关问题:

如果你是将JS函数写入到一个单独的文件中,如function.js,



下面为function.js
/*
这里最好是记录一下函数的作用,如果有参数,最好就是说明一下
函数名称:func1
函数作用:测试加载外部JS文件
参数说明:无


*/
function func1()
alert("调用了函数1");

/*
函数名称:func1
函数作用:测试加载外部JS文件
参数说明:无


*/
function func2()
alert("调用了函数2");



至于JS的书写规范有很多种,主要就是方便浏览及习惯,你可以自己看看书上的书写方式或者参考一下其他高手方式。



出现乱码的原因就是1楼所说,原因是你的JS文件和html文件的编码不一致,而且你的JS文件有中文(如果js文件只有英文的话,即便是编码不一致也不会出现乱码情况。)
你应该用记事本打开你的JS文件,然后点击“文件”--另存为--把编码改为“UTF-8”的编码,
这样就不会出现乱码了。

参考技术A

要把图片当成是图片对象才行~
var a=new Image(); //这个是原生的JS实例化
a.src=arr[shownum++].url;

然后Image对象有一个属性“onload”,这个就是加载完成,当加载完成之后你可以执行一个函数比如
a.onload=function()
alert("完成加载");


这样当你的图片加载完成后就执行下面的函数了~

你这样还是异步的

var a=new Image(); //这个是原生的JS实例化
a.src=arr[shownum++].url;
a.onload=function()
alert("完成加载");

alert("0");

你可以看看这个谁先运行的

参考技术B

要把图片当成是图片对象才行~
var a=new Image(); //这个是原生的JS实例化
a.src=arr[shownum++].url;

然后Image对象有一个属性“onload”,这个就是加载完成,当加载完成之后你可以执行一个函数比如
a.onload=function()
alert("完成加载");


这样当你的图片加载完成后就执行下面的函数了~

在页面加载的时候就想要执行某个JS操作而不是在页面加载完后再执行该怎么做

1、$(function()
...
)
2、$(document).ready(function()
...
)
上面这两种写法是不是在页面加载完成后才执行啊,如果先希望在在页面的加载阶段就执行某个JS操作,根据JS来指导哪些内容该显示,该怎么显示?应该怎么做呢

参考技术A JS是HTML的一部分,整个HTML代码都必须被浏览器下载完后才能开始按顺序解析执行。
按你的情况,有几种方法:
1、直接把JS写到页面靠前的位置就行了,不要放到onload或jQuery()中套起来;
2、如果想控制哪些显示哪些不显示,只能在页面加载完后再隐藏起来;
3、如果想控制哪些根本不加载,那么只有在后台对HTML整个代码进行控制,不能用JS;
4、最后,你可以用ajax对哪些部分加载或不加载,进行纯JS控制,当然,要多次调用后台,每调用一次分别返回不同的HTML内容,再用JS拼接起来。
参考技术B (function()
// TODO

)();本回答被提问者和网友采纳

以上是关于js 怎么让图片加载完成后才执行下面代码?的主要内容,如果未能解决你的问题,请参考以下文章

js 怎么让图片加载完成后才执行下面代码?

javascript判断图片是否加载完成方法整理

如何让页面加载完成后执行js

JS如何实现图片分段加载

这种加载动画代码怎么实现?不使用图片

js中,如何等待多个图片加载完后再执行其他的js代码。