Solved

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

Posted on 2014-03-27
4
431 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 82

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 82

Accepted Solution

by:
leakim971 earned 500 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

896 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now