Jquery ielādē elementus

[ziedinjsh]

sveiki, meiģinu panākt, ka jquery ielādē elemntus kad rulēju uz leju lapu, ielādē tik daudz kas ir redzams ekrānāna, bet šobrīd nekas rulējot nenotiek!

jQuery(function(){

var count = jQuery('#am-container a').size();
var lastScroll = 0;

jQuery('#show').text(count);
jQuery('#am-container a').hide();
jQuery('#am-container a').slice(0, 16).fadeIn(500);

jQuery(window).scroll(function(event){
        var st = jQuery(this).scrollTop();
        if (st > lastScroll){
jQuery('#am-container a:hidden').slice(0, 16).fadeIn(500);
        }
lastScroll = st;
});
});

Edited August 20, 2014 by ziedinjsh

[codez]

kur jsfiddle?

[ziedinjsh]

Šeit ir kods jsfiddle.net pirmās divas pirmām divām nitek funkcijas, bet pārējās jau ir redzamas, tās kas ir apakšā

 

šis piemērs strādā, bet kad bildes ir blakus četras, tad nestrādā!

Edited August 20, 2014 by ziedinjsh

[jurchiks]

WTF, nafig viņus IZVADĪT un pēc tam NOSLĒPT, lai vajadzētu ar javaskriptu PARĀDĪT?

Es vēl saprastu ar AJAX ielādēt, bet tīšām NOSLĒPT?

[ziedinjsh]

Labi, kā tad varetu izvadīt viņus ar ajax?

[codez]

Ideja ir pavisam vienkārša. Ja liksi src bildi, tā tiks ielāde uzreiz, tāpēc img taga src liek, piemēram, loading.gif-u, bet bildes lieku varam pieglabāts data=src parametrā.
Tālāk skrullējot skatāmies, vai bilde pozīcija ir virs scroll pozīcijas + loga augstuma pozīcijas. Ja ir, ņemam data-src parametru un ieliekam bildē.
Piemērā es ieliku +200, lai bildē ielādētos tad, kad jau 200 tās pikseļi ir ekrānā - tas ir lai varētu redzēt, ka piemērs strādā, bet reālā situācijā var uzlikt -100 līdz -1000, lai bilde sāk lādēties nedaudz pirms vēl viņa ir redzama.

http://jsfiddle.net/codez/6zb81uLt/1/

$(window).on('scroll',function(event){
    var st = $(this).scrollTop();
    var height = $(window).height();
    $('img').each(function(){            
        var el = $(this);
        if (el.position().top+200<(st+height)) el.attr('src',el.data('src'));
    });
}).trigger('scroll');

<img src="http://s.gif-war.com/gifs/loading4.gif" data-src="https://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg" width="300" />
<br />
<img src="http://s.gif-war.com/gifs/loading4.gif" data-src="https://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg" width="300" />
<br />

Tas viss, ja tu pats gribi to taisīt.

Saprotams, ka tādām lietām ir arī gatavas bibliotēkas:

http://luis-almeida.github.io/unveil/

[ziedinjsh]

Lazy load man neizdevās palaist. Šis man arī neiet tas laikam tapēc ka bildes izvietošanais iz mantoju montage pluginu

Edited August 21, 2014 by ziedinjsh

[jurchiks]

Labi, kā tad varetu izvadīt viņus ar ajax?

Elementāri. Izvadi pirmās 20 vai cik nu tur, tālāk šādi (pseidokods):

 

HTML:

<div id="pictures">
    <a href="url"><img src="src" /></a>
    ...
</div>

JS:

var offset = xyz; // cik bildes ielādētas pirmajā piegājienā
var moreAvailable = true; // vajag pārbaudīt laikus, vai ir, ko vēl ielādēt
on scroll:
    // izvairāmies no liekiem ajax calliem, ja zināms, ka vairs bilžu nav
    if (!moreAvailable)
        return;
    // someOffset - cik pikseļus pirms bilžu bloka apakšas sasniegšanas sākt ielādēt nākamās bildes
    if (scrollTop >= #pictures offsetTop + #pictures outerHeight - someOffset)
        ajax('url=loadMorePictures', { offset: offset }, showMorePictures);

function showMorePictures(response)
{
    moreAvailable = response.moreAvailable; // servera pusē pārbaudīt, vai ir pēc šīm 20 vēl citas pieejamas, šeit var izmantot MySQL SELECT SQL_CALC_FOUND_ROWS
    // response.pictures = array, tukšs vai nē, vienalga, bet jābūt vienmēr
    for (var i = 0; i < response.pictures.length; i++)
    {
        var picture = response.pictures[i];
        
        #pictures appendChild <a href=" + picture.url + "><img src=" + picture.src + " /></a>; // ja vajag, piemet klāt title utt
    }
}

Edit: ja tu izmanto montage, tad showMorePictures vajag nedaudz pamainīt uz šādu:

function showMorePictures(response)
{
    moreAvailable = response.moreAvailable;
    var nodes = [];
    
    for (var i = 0; i < response.pictures.length; i++)
    {
        var picture = response.pictures[i];
        nodes.push($('<a href="' + picture.url + '"><img src="' + picture.src + '" /></a>'));
    }
    
    #pictures.append(nodes).montage('add', nodes);
}

Edited August 21, 2014 by jurchiks