Pedro Chagas
asked on
Detecting if images are loaded (loaded as css background image)
Hi E's, I try to get a solution for detect if the images loaded with css background-image were actually loaded:
I try this:
It is very important to me because my project for work must have all the images loaded, otherwise the project does not make sense.
Any idea?
The best regards, JC
I try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../ficheiros_apoio/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#logo{position: relative; background-image: url(image_folder/logo.jpg); width: 50px; height: 50px; background-repeat: no-repeat;}
#home{position: relative; background-image: url(image_folder/home.jpg); width: 50px; height: 50px; background-repeat: no-repeat;}
#contact{position: relative; background-image: url(image_folder/contact.jpg); width: 50px; height: 50px; background-repeat: no-repeat;}
</style>
</head>
<body>
<div id="logo" class="pic"></div>
<div id="home" class="pic"></div>
<div id="contact" class="pic"></div>
<script>
$(document).ready(function(){
jQuery(function($) {
$(".pic").error(function() {
var which_fail = $(this).css("background-image");
alert(which_fail+" fail");
});
})
});
</script>
</body>
</html>
But don't work.It is very important to me because my project for work must have all the images loaded, otherwise the project does not make sense.
Any idea?
The best regards, JC
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No,
jQuery(function($) is a shortcut of $(document).ready(function (){
you don't need both
to be able to reuse individually part of your code you may have a $(document).ready it more than one time
jQuery(function($) is a shortcut of $(document).ready(function
you don't need both
to be able to reuse individually part of your code you may have a $(document).ready it more than one time
ASKER
My apologizes,
I tested your code in "texastic editor" in iPad and I don't saw that it was a comment (// == $(document).ready(function (){).
Thank you.
The best regards, JC
I tested your code in "texastic editor" in iPad and I don't saw that it was a comment (// == $(document).ready(function
Thank you.
The best regards, JC
ASKER
Just one question, in your solution $(document).ready function are inside jQuery function, I don't know it is crucial or not for the solution, but have any way to put $(document).ready outside the jQuery function?
That request is because I declare $(document).ready in the begin of my project, and in that project I have a lot of scripts, so I thing is not good idea use $(document).ready two times in my project.
Hi @Alexandre Simões, your solution it is a good solution too, and I believe I will use them in future projects.
At the moment does not fit the way the project is assembled, and would have to make a lot of changes to be able to use your solution. Anyway appreciate it.
The best regards, JC