monk master monk master - 2 months ago 6
HTML Question

How do you combine JavaScript code and html code together?

I am newer to Javascript and HTML. I want to check whether an image is loaded or not. I found this code on StackOverflow,but I don't know how to combine them into a finished piece:
Any one can tell me?

The js code:

<script language="JavaScript">
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
</script>;


The html code:

<div>
<table width="100%" height="100%" align="center" valign="middle">
<tr>
<td bgcolor="258cca"><td align="center" valign="middle">
<p>
<img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr></tr>
</table>
<BODY ondragstart="return false;" ondrop="return false;">
</div>


The CSS:

body {
background-color: #558CCA;
}
.STYLE1 {
color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
}
.STYLE2 {
font-size: 21px;
}

Answer
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
            body {background-color: #558CCA;}
            .STYLE1 {color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;}
            .STYLE2 {font-size: 21px}    
        </style>

        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                $("img").on("load", function() {
                }).each(function() {
                if(this.complete) $(this).load();
                });
            }
        </script>
    </head>

    <body>
        <div>
            <table width="100%" height="100%" align="center" valign="middle"> 
                <tbody>
                    <tr>
                        <td bgcolor="258cca"></td><td align="center" valign="middle">
                            <p>
                            <img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
                            </p>
                            <p class="STYLE1 STYLE2"></p>
                        </td>
                    </tr>
                    <tr>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Fiddle