Question

so i have this script:

<script type="text/javascript">
        $(window).load(function () {
            var imagePath = new String($('.give').css("background-image").toString());
            if (imagePath == "none") {
                $('.give').css("text-indent", "0px");
            }
            else if (imagePath != null) {
                var tempImage = new Image();
                tempImage.onerror = function () {
                    if (!tempImage.complete) {
                        $('.give').css("text-indent", "0px");
                    }               
                }
                imagePath = imagePath.split("images/")[1];
                imagePath = "images/" + imagePath.split(")")[0];
                imagePath = imagePath.split('"')[0];
                tempImage.src = imagePath;
            }   
        });
    </script>

i need to check if images are disabled in the browser, if they are i need to bring the text back on the screen so the app can be used without images. the first if statement handles chrome and firefox because for some reason if images are disabled they return “none” for the background css property. not the case for ie7. the second if statement attempts to handle the case for ie but for some reason neither .onload or .onerror are getting fired.

has anyone encountered this that can help? or point me in the right direction? i have tried alot ways to do this. but i just cant seem to get it to work.

Answer 1

This is my solution:

<script type="text/javascript">
    detectImageEnabledMode({
        onDetectImageIsDisabled:function(){
            alert('disabled');
        },
        onDetectImageIsEnabled:function(){
            alert('enabled');
        }
    });
    function detectImageEnabledMode(options){
        /* define disabled/enabled actions */
        var actionCounter = 0;
        var enabledAction = (options.onDetectImageIsEnabled && typeof(options.onDetectImageIsEnabled)=='function')?options.onDetectImageIsEnabled:function(){};
        var enaledActionRun = function(){
            if(actionCounter) return;
            actionCounter++;
            enabledAction();
        }
        var disabledAction = (options.onDetectImageIsDisabled && typeof(options.onDetectImageIsDisabled)=='function')?options.onDetectImageIsDisabled:function(){};
        var disabledActionRun = function(){
            if(actionCounter) return;
            actionCounter++;
            disabledAction();
        }
        /* create image */
        var img = new Image();
        var currentTime = (new Date()).getTime();
        if(navigator.appName.indexOf('Microsoft Internet Explorer') != -1){// ie
            img.onload = enaledActionRun;
            img.onabort = enaledActionRun;
            img.onerror = enaledActionRun;
            img.src = currentTime+'.'+currentTime+'?time='+currentTime;
            setTimeout(function(){
                disabledActionRun();
            }, 0);
        }else if (navigator.appName.indexOf('Opera') != -1) {// opera
            img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="+'?time='+(new Date()).getTime();
            if(img.complete){
                enaledActionRun();
            }else{
                disabledActionRun();
            }
        }else{// other
            img.src = currentTime+'.'+currentTime+'?time='+currentTime;
            if(img.complete){
                disabledActionRun();
            }else{
                enaledActionRun();
            }
        }
    }
    // tested in: ff 2+, opera 9+, chrome, safari 4+, ie 6+
</script>

Live demo.
The only problem – the minimum asynchronous in ie:

setTimeout(function(){
 disabledActionRun();
}, 0);