Opencart internet explorer da yavaş sayfa yüklenmesi çözümü

Sanırım bütün web tasarımcılarının ortak  görüşüdür,Microsoft internet explorer ın ne kadar sorunlu ve kullanışsız  olduğunu söylemeye bile gerke yok. Her yeni versiyonunda “belki bu sefer karşımıza doğru düzgün bir tarayıcı çıkar, biz de kurtuluruz” diyorum ama maalesef hiç bir gelişme oluyor ve maalesef standart internet kullanıcıları işletim sistemleriyle birlikte gelen bu ilkel tarayıcıyı, google chrome ve firefox gibi ücretsiz, hızlı, güvenli ve son decere gelişmiş başka  alternatifleriyle bir an önce değiştirmeyi düşünmüyorlar.. Bize de tasarım sırasında defalarca karşılaştığımız her türden  iexplorer uyumsuzluklarını saatlerimizi bazen günlerimizi sarfederek çözmek kalıyor.. Bu uyumsuzlukların pek çoğu css kökenlidir ama aşağıdaki sorun daha farklı.

Buna hiç şaşırmayacaksınız ama yine de söyleyim; Opencart version 1.5.1.3 te, i.explorer da sayfalar son derece yavaş yükleniyor. Araştırmalarım sonucunda  bunun ana nedenlerinden birinin Opencart version 1.5.x.x standart olarak bulunan fancybox internet explorer uyumsuzluğu olduğunu buldum. Aşağıdaki çözüm, sayfaların i.explorer da açılmasını kayda değer biçimde hızlandırıyor.

Adım1

Aşağıdaki dosyayı bulun:
catalog/view/theme/your theme/common/template/header.tpl

Bu kodları

[codesyntax lang=”javascript” lines_start=”1″]

<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

[/codesyntax]

bununla değiştirin:

[codesyntax lang=”javascript” lines=”normal” lines_start=”1″ container=”pre_table” strict=”yes” blockstate=”expanded” doclinks=”1″]

<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.js"></script>
         <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
         <!--[if IE]>
         <script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.js"></script>
         <![endif]-->

[/codesyntax]

 

Adım 2

Bu dosyayı açın:

catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css

/* IE6 */ ve /* IE6, IE7, IE8 */ ile ilgili bölümleri kesip kaydedinAşağıdaki kodu kopyalyın:

[codesyntax lang=”javascript”]

/* IE6 */.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
  .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
  .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
  .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
  .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
  height: expression(this.parentNode.clientHeight + "px");
  }#fancybox-loading.fancybox-ie6 {
  position: absolute; margin-top: 0;
  top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
  }
#fancybox-loading.fancybox-ie6 div   { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='scale'); }
/* IE6, IE7, IE8 */
.fancybox-ie .fancybox-bg { background: transparent !important; }
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
  .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }

[/codesyntax]

kodu jquery.fancybox-1.3.4-iefix.css adı ile kaydedin:
catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.cssAdım 3
Aşağıdaki kodu:

[codesyntax lang="php"]
jQuery(function($) {
 if($.fn.fancybox) {
 var fbonstart = ($('.fancybox-ie').length != 0) ? function(){if($('#fbiecssfix').length == 0) $('head').append('<link id="fbiecssfix" rel="stylesheet" type="text/css" media="all" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.css" />');} : null;
 $("#yourfancyboxlink").fancybox({'onStart': fbonstart});
 }
 });

[/codesyntax]

jquery.fancybox-1.3.4-iefix.js olarak kaydedin.

Adım 4
Yeni elde ettiğimiz ve değiştirdiğimiz dosyaları server de dizine aktarın:
– catalog/view/theme/your theme/common/template/header.tpl
– catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css
– catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.css
– catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.js

Hepsi bu..