?
Solved

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

Posted on 2014-03-27
4
Medium Priority
?
439 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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

762 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