Question

I am having below issue when trying to brows the site through navigation,

http://nickylurie.com.au/Temp/index.php

as you can see left hand site image some time load some time aren’t,
i am you using below code to change the image when going through to different page,

var pic = new Image();
pic.src = "images/homeLargeImg.jpg";

and below is the my backend code.

var RHigh=$(‘#RightPane’).height()
var windHigh=$(window).height()

$(pic).hide().load(function()
{
//debugger;
$(this).fadeIn();
var marginT=(windHigh/100*5)
var imgH = (marginT+windHigh)

$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"'  style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()

})

$(window).bind(‘resize’, function()
{
resize()
});

function resize()
{

RHigh=$('#RightPane').height()
windHigh=$(window).height()

if( RHigh < windHigh)   
    {
        $("#triquibackimg").css("height",$(window).height());
        $("#LeftPane").css("width",$("#LeftPaneImage").width());
        $("#RightPane").css("margin-left",$("#LeftPaneImage").width()); 

        //----------------Right Pane vAlign--------------

                (function ($) {
                $.fn.vAlign = function() {
                    return this.each(function(i){
                    var h = $(this).height();
                    var oh = $(this).outerHeight();
                    var mt = (h + (oh - h)) / 2;    
                    $(this).css("margin-top", "-" + mt + "px"); 
                    $(this).css("top", "50%");
                    $(this).css("position", "absolute");    
                    }); 
                };
                })(jQuery);

                (function ($) {
                $.fn.hAlign = function() {
                    return this.each(function(i){
                    var w = $(this).width();
                    var ow = $(this).outerWidth();  
                    var ml = (w + (ow - w)) / 2;    
                    $(this).css("margin-left", "-" + ml + "px");    
                    $(this).css("left", $("#LeftPane").width());
                    $(this).css("position", "absolute");
                    });
                };
                })(jQuery);

                $(document).ready(function() {
                    $("#RightPane").vAlign();
                    //$("#RightPane").hAlign();
                });

    }
else
    {   
        $("#triquibackimg").css("height",(RHigh+150));
        $("#LeftPane").css("width",$("#LeftPaneImage").width());
        $("#RightPane").css("margin-left",$("#LeftPaneImage").width()); 

    //  if ($(window).height()>800){

// $(“#RightPane”).css(“position”,’relative’);
// }
// else{$(“#RightPane”).css(“margin-top”,60)}
}
}

can some one please advice about this?

Thanks

Answer 1

Offtopic: I wanted to comment on this questions, because I don’t have the answer (yet), its lame that I must have a repetation of 50 to comment..

Ontopic:
What are you trying to achieve and what is the problem?

• When I try to view your website, all the large images on the left are loading (mac, chrome), I checked all pages..
• They do load very slow..
• Why do you want to insert the image by javascript and not simply by a img tag?