Solved

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

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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

707 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