Jump to content
php.lv forumi
Sign in to follow this  
ziedinjsh

Jquery ielādē elementus

Recommended Posts

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 by ziedinjsh

Share this post


Link to post
Share on other sites

Š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 by ziedinjsh

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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 by jurchiks

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...