Проблема с загрузкой изображения Jquery при навигации по меню

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

У меня возникает проблема, приведенная ниже, при попытке настроить сайт с помощью навигации,

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

как вы можете видеть, изображение сайта слева некоторое время загружается, некоторое время нет, я использую приведенный ниже код для изменения изображения при переходе на другую страницу,

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

и ниже приведен мой внутренний код.

var RHigh=$(‘#Правая панель’).height() var windHigh=$ (окно).height()

$(pic).hide().load(function() { //отладчик; $(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’, функция() { resize() });

функция 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)}
}
}

может кто-нибудь посоветовать по этому поводу?

Спасибо

Ответ №1:

Оффтопик: Я хотел прокомментировать эти вопросы, потому что у меня нет ответа (пока), это неубедительно, что у меня должно быть повторение 50, чтобы прокомментировать..

Ontopic: Чего вы пытаетесь достичь и в чем проблема?

  • Когда я пытаюсь просмотреть ваш веб-сайт, загружаются все большие изображения слева (Mac, chrome), я проверил все страницы..
  • Они загружаются очень медленно..
  • Почему вы хотите вставить изображение с помощью javascript, а не просто с помощью тега img?

Комментарии:

1. на самом деле я хочу изменить размер левого изображения по высоте браузера, и когда я изменяю размер изображения окна, измените размер в соответствии с высотой окна. и правая панель и навигация перемещаются в соответствии с этим, также правая панель должна быть v выровнена по окну.

2. До сих пор я не замечал вашего комментария, он все еще актуален для ответа?