Today I'm going to explain a little trick in the development of a page: How to deal with split graphs
In other words, what happens if this picture doesn't load successfully?
First step: HTML page:
Copy Code code as follows:
<! DOCTYPE html>
<title>gbin1</title>
<meta charset=utf-8/>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
</script>
<body>
</body>
Run this page and you'll see a bad picture.
The second part: is a JavaScript, its function is: if the picture is broken, a pop-up error prompts:
Copy Code code as follows:
$ (function () {
$ (' img '). Error (function () {
Alert (' Error ');
});
});
Run it, do you see it?
Part III: Next, we want to improve the friendly effect of the interface, we can call attr with a default picture to replace the split picture:
Copy Code code as follows:
$ (function () {
$ (' img '). Error (function () {
Alert (' Error ');
$ (this). attr (' src ', ' yun_qi_img/logohover.png ');
});
});
Have you seen the logo icon for the geek tag? This will enable the processing of the split graph.
Add a few: In fact, the error in jquery1.8 used to advocate, after 1.9 not too advocated, but still can use, personally feel quite convenient.
You can also change the following method: (Error replaced on, followed by a parameter)
Copy Code code as follows:
$ (function () {
$ (' img '). On (' Error ', function () {
Alert (' Error ');
$ (this). attr (' src ', ' yun_qi_img/logohover.png ');
});
});
In fact, the previous error method is a shortcut to the on method
By the way, if you test the error method locally, you need to start the server because the error method needs to check to see if the resource is available. For example, this test.html, you need to start the server, in the browser to enter http://localhost:8080/test.html before you can see the effect.
I hope we can help you, 3q!.
