LazyLoad -- Resimler siteyi açtıkça görünsün

[fofotara]

Genelde Markafoni, trendyol gibi firmalarda kullanılan bir teknik.

jquery klasörüne KOPYALAYIN

common.js dosyasının hemen başına :

$(function() {
          $("img").lazyload({
              placeholder : "../theme/default/image/close.png",
              effect      : "fadeIn"
           });
       });


if (window.jstiming) window.jstiming.load.tick('headEnd');

ekleyin


placeholder : "../theme/default/image/close.png" satırını kendinize göre düzenleyin.

Sayfa açılacak ve hemen sonrası resimler yüklenecektir.

 

[enesaltunisik]

yeterli bir açıklama yaparsınız bilgi sahibi olacağım tam olarak demek istediğinizi anlamadım saygılar

 

[yusuf1990]

arkadaşım js. ve css tanımını unutmuşsun birazdan açık bir şekilde paylaşacağım

 

[fofotara]

yeterli bir açıklama yaparsınız bilgi sahibi olacağım tam olarak demek istediğinizi anlamadım saygılar

Başlıkta ne yazıyorsa o . nasıl açıklanır o ?

---

arkadaşım js. ve css tanımını unutmuşsun birazdan açık bir şekilde paylaşacağım

js. dosyasını tıklayıp indiriyorsun linkini verdim. KOPYALAYIN tıkladınız mı ? Ayrıca css dosyası yok ki. Kod bu kadar.

Site ilk açıldığı an da sadece ekranda gözüken resimler yükleniyor. Aşağıya kaydırdıkça ürün resimleri sonradan yükleniyor.

 

[yusuf1990]

http://www.appelsiini.net/projects/lazyload

 

[fofotara]

verdiğin linkte css dosyası göremedim ?

bahsettiğiniz ;

.lazy {
display: none;
}

bu mudur ?

 

[yusuf1990]

header.tpl yi aç
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

hemen altına
<script src="catalog/view/javascript/jquery/jquery.lazyload.js" type="text/javascript"></script> ekle
common.js dosyasını aç

$(document).ready(function() { bu kodu ara
altına
$("img.lazy").lazyload();
ekle.

---

verdiğin linkte css dosyası göremedim ?

bahsettiğiniz ;

.lazy {
display: none;
}

bu mudur ?

yanlış yazmışım

 

[fofotara]

header.tpl yi aç
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

hemen altına
<script src="catalog/view/javascript/jquery/jquery.lazyload.js" type="text/javascript"></script> ekle
common.js dosyasını aç

$(document).ready(function() { bu kodu ara
altına
$("img.lazy").lazyload();
ekle.

---

verdiğin linkte css dosyası göremedim ?

bahsettiğiniz ;

.lazy {
display: none;
}

bu mudur ?

yanlış yazmışım

---

Verdiğiniz şekilde çalışması mümkün değil.

1.

$(document).ready(function() { bu kodu ara
altına

altına olmaması gerek. zaten amaç ilk etapta sayfa yüklenmemesi . Siz sayfayı yüklendikten sonra kodu aktif ediyorsunuz. Yani hemen üstüne olacaktı.

2.

$("img.lazy").lazyload(); 
ekle.

Bu şekilde jquery .lazy class ı arar. Ama opencart div classlarında bu yok.

$("img").lazyload();

olursa tüm img taglarında geçerli olacaktır.


İyi Çalışmalar

 

[yusuf1990]

$(function() {

$("img").lazyload({
placeholder : "../theme/default/image/close.png",
effect : "fadeIn",

});
});

haklısın kardeş karıştırmışım herşeyi üstteki çalışıyor

---

<script src="catalog/view/javascript/jquery/jquery.lazyload.mini.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".post img").lazyload({
placeholder : "../theme/default/image/close.png",
effect : "fadeIn",

});
});
</script>

bu şekildede çalıştırabilirsiniz.

 

[fofotara]

şimdi en üstte yazdığım gibi oldu zaten ? mutabık mıyız

 

[blue_caplan]

yeterli bir açıklama yaparsınız bilgi sahibi olacağım tam olarak demek istediğinizi anlamadım saygılar

arkadaşım şunun gibi sayfayı kaydırdıkca altttakiler aaçılıyor anladıgım kadıtüyla

örnek olabilir

http://marcamarca.com.tr/marwells-marka-1-liste-2.aspx

 

[fofotara]

________________aynen budur !

 

[Ayazcool]

Ne yapsam olmadı; şu meseleyi toparlayıp baştan yazsanız olmaz mı?

 

[painersin]

Gerçekten arkadaşlar. Stabil bi versiyonunu aktarıcak bi arkadaş varsa memnun oluruz. Oldukçada faydalı bir düzenleme olarak görünüyor.

Ben uygulamamda, işlemler yapıldıktan sonra nivoslider ın çalışmadığını gözlemledim. Sanırım nivo ile bir çakışma oluyor ve herikiside çalışmıyor.

 

[seco1907]

Çok güzel . Fakat çalıştıramadık . İşi bilen bir arkadaş el atarsa herkes için çok yararlı bir uygulama olabilir.

 

[admira]

Merhaba fofotara, konunun ilk mesajında "jquery klasörüne KOPYALAYIN" biraz açıklarmısın. Ayrıca java dosyası olan common un tam yolunu belirtirsen sevinirim. bende iki yerde var.

1. /httpdocs/catalog/view/javascript

2. /httpdocs/catalog/view/javascript/jquery hangisi olacak.

 

[RedWhite27]

ekteki klasörü olduğu gibi sitenizin bulundugu alana yükleyin
sonuç: catalog/view/javascript/jquery klasörü içinde jail klasörü içinde
blank.gif - loader.gif ve jail.min.js adında 3 dosyanın aktarıldığından emin olun.
loader.gif resmini kendinize göre uyarlarsınız artık.
_______________________________________________________________________________

Aşağıdaki klasörü aç:

catalog/view/theme/TEMANIZ/template/product/category.tpl


bul:
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>


değiştir:
<div class="image">
<a href="<?php echo $product['href']; ?>"><img class="imagejail" src="catalog/view/javascript/jquery/jail/loader.gif" width="<?php echo $product['thumbwidth']; ?>" height="<?php echo $product['thumbheight']; ?>" data-src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a>
<noscript>
<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a>
</noscript>
</div>


bul:
onclick="display('grid');"


değiştir:
onclick="display(\'grid\');"


bul:
onclick="display(\'list\');"


değiştir:
onclick="displaybutton(\'list\');"


bul:
function display(view) {


üst satırına ekle:
function displaybutton (view) {
display(view);
$(function(){
$('img.imagejail').jail({
effect: 'fadeIn',
offset: 300,
speed : 400
});
});
};



Aşağıdaki klasörü aç:

catalog/controller/product/category.php


bul:
$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));


alt satırına ekle:
$imagewidth = $this->config->get('config_image_product_width');
$imageheight = $this->config->get('config_image_product_height');



bul:
$image = false;



alt satırına ekle:
$imagewidth = '';
$imageheight = '';


bul:
'thumb' => $image,


alt satırına ekle:
'thumbwidth' => $imagewidth,
'thumbheight' => $imageheight,



Aşağıdaki klasörü aç:

catalog/view/theme/TEMANIZ/template/common/header.tpl


bul:
</head>


üst satırına ekle:
<script type="text/javascript" src="catalog/view/javascript/jquery/jail/jail.min.js"></script>
<script type="text/javascript">

$(function(){
$('img.imagejail').jail({
effect: 'fadeIn',
speed : 400,
placeholder : 'catalog/view/javascript/jquery/jail/loader.gif'
});
});

</script>

_______________________________________________________________________________

:angel: ve sonuç : http://www.tumsarf.com/notebook-batarya/hp-compaq-batarya?limit=100