?
Solved

Detecting if images are loaded not Work in I.E. and Firefox

Posted on 2014-03-27
4
Medium Priority
?
442 Views
Last Modified: 2014-03-27
Hi E's, the below code serves to detect whether images were loaded, loaded image via css background-image.
The code work well in safari and chrome, but don't work in firefox a internet explored:
<!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>
jQuery(function($) { 
    $(".pic").each(function(i, img) {
        var bi = $(this).css("background-image").match(/url\(["']?([^()]*)["']?\)/).pop();
        var image = new Image();
        $(image).error(function() {
            var which_fail = bi;
            alert(which_fail+" fail");
        });
        $(image).attr("src", bi);
    });  
});
</script>
</body>
</html>

Open in new window

What could be changed to make it work in all browsers?

The best regards, JC
0
Comment
Question by:Pedro Chagas
  • 2
  • 2
4 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 39960468
replace :
$(this).css("background-image").match(/url\(["']?([^()]*)["']?\)/).pop();
by :
$(this).css("background-image").match(/url\(([^()]*)\)/).pop().replace(/"|'/g,"");
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39960487
Hi @leakim971, remains the same.
My i.e. is 11 and ff 27.0.1.
Remember, the code that I present here, the solution was given by you in this question: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28398399.html and you did the test here: http://jsfiddle.net/L5e3w/1/.
Picking up on another question is now easier to test possible new solutions. I hope this information helps.

~JC
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39960492
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39960512
You are amazing.
In the name of my last 3 posted question, thank you.

The best regards, JC
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question