25 AĞUSTOS 2012, CUMARTESİ

Javascript Kaydırma Öğretici Yük Dinamik İçerik Sayfasına Kullanıcı Alt Ajax Ulaştığında

Merhaba, bu JavaScript programlama dersi biz nasıl gösterecektir özel komut dosyası yürütme ne zaman dibe kullanıcı kayar ancak sayfadaki içerik Eğer bir Facebook hesabınız varsa şu anda bu etkiyi görebilirsiniz ve Facebook, yeni yürütür facebook zaman çizelgeleri aşağı kaydırma AJAX sayfa içeriği altına kaydırma her zaman istekleri ve ne yapar sayfaya daha dinamik verilere yükler Kullanıcı gidin olur sadece eğer Alt sadece otomatik olarak daha dinamik içerik yüklemek için ajax isteği gönderir ve diğer büyük ölçekli dinamik web siteleri de her elde etmek için bu yaklaşımı kullanılır Hasta ver

i işleme veritabanı dinle biz başlamadan önce akıllı bir modern bir şekilde en bitirmek bir göz atalım ürün Biz JavaScript bugün html5 belgesini kullanarak komut dosyası ne olacağını tamam bu inşa öğrenme olacak titiz olduğ

unu Bu eğitimde içindeki vekiller bir büyük yaratılmış şimdi ne Görüntü sadece kendi yaklaşık 2000 piksel bir yer tutucu sayfa içerik olduğu merhaba ben burada görünen tarafından okul var görebilirsiniz v

“Ders Kodu: http://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax Dinamik sayfa içeriği Javascript kullanarak sayfa iç...”
Adam Khoury

e ben o pencere bölmesinde kaydırabilirsiniz içerik çok şey var Benim sayfadaki içerik 2000 piksel yüksek olduğundan Şimdi herşey etkinleştirildiğinde komut insanların devreye girer Ben bu sayılar gelip görmek kaydırma her başlattığınızda bu yüzden pencereyi kaydırmak Işığa Soldaki sayı yüksekliği dikey yüksekliğini temsil piksel ve bu sayı içerik ne kadar görebilirsiniz musun çağrı cihazı içine aşağı kaydırma ne kadar temsil sayfanın içine kaç piksel Ben sayfanın al

Javascript Kaydırma Öğretici Yük Dinamik İçerik Sayfasına Kullanıcı Alt Ajax Ulaştığında Resim 1 Javascript Kaydırma Öğretici Yük Dinamik İçerik Sayfasına Kullanıcı Alt Ajax Ulaştığında Resim 2 Javascript Kaydırma Öğretici Yük Dinamik İçerik Sayfasına Kullanıcı Alt Ajax Ulaştığında Resim 3 Javascript Kaydırma Öğretici Yük Dinamik İçerik Sayfasına Kullanıcı Alt Ajax Ulaştığında Resim 4

t kısmına geldiğinizde artık yakın hayır almak i sayfadaki içeriğin ne olur seyretmek bu yeni dinamik olacak içerik ben altına gidin sadece sayfanın içine uzattı ve burada bu kaydırma çubuğu ile söyleyebilirim yüksekliği iyi bir miktar azalacak bize tutabilir sayfada çok daha fazla içerik var olduğunu biliyorum icar aşağı kaydırma böylece fark edebilirsiniz biz altına almak yağmur aşağı gidelim Eğer numaralar yüzden şimdi hareketli altına gidin şimdi burada eve bu scrollbar gözkulak Ben yeni bir mavi yaptım altına aldığ

ımda sağ bakın Eğer kazanılan herhangi bir yükseklik bile yok olabilir çıktı bir dizi yüksekliği olmak bu içeriğin bir sürü dinamik bir yüksekliğe yapar sadece var Yeni AJAX istekleri bunun altına almak zaman sonra olur Burada ve kahretsin alıcı size küçük bkz üzerinde çok daha fazla içerik vardı Biraz scrollbar öğrencisi biz orada içeriğe çok şey var anlamına gelmektedir ve bu etkiyi elde etmek için çok soğuk uzun boylu değil göreceksiniz tamam kağıt kod editörü yeni oluşturulan yangın HTML dosyası içinde çalışmak ve çıplak kemikleri ile başlamak html5 web belgesinin kadar ve daha sonra birlikte takip edebilirsiniz baş tamam şimdi bana arkadaşım tamam tamam mucho zekâ Belgenin kadar biz komut elemanı sıkı hale başlatmak için gidiyoruz Metin JavaScript birkaç cihazı aşağı gitmek ve şimdi bizim komut biz yakın emin olun Benim on line aşağı gitmek ve stil ödeme açmak edelim ve sonra en en tanımlayalım stil teknoloji yakın ve açılış tarzı etiketinde izin O sıkı biz komut önce şimdi text / css olacak bazı HTML elemanları ve stil bu unsurlar için var en yapacağımız yerde koyalım ilk yaptığımız verir zaman belirli bir kimlik statüsü, ikinci vermek yapacağız verilen kimlik yukarı sıçan böylece tamam sarılmış konum olacak vermek ana sayfa içeriğini yaptım Eğer aşağı kaydırmak istediğiniz ve üzerinde dibe vurmak ve bu gelişme amaçları için sadece bu kimlik statüsüne yaptım biz eğer öğretici şimdi statüsünü teşvik sonra sonra kaldırabilirsiniz hangi Bazı varsayılan değerleri koyacaktım hangi sıfır boru boşluk koyacağım ve başka 0 ve içerik olarak rap etiketinde Ben tüm web sayfası içerik koymak ve benim için kulüpler Eğer olur benim web sayfası içeriği uyarmak için gidiyor sadece simüle görüntü HTML işaretleme bir sürü var apt K içine işlenen bir dinamik veri ya da apt şimdi en aşağıdaki CSS uygulamak izin vermedi yerine bu iki çizgi ile yapıyoruz böylece yaşam unsuru haline hedefliyor Biz sadece burada yerine koymak eğer öyleyse vermedi tutum bilir Pozisyon yapıştırılmış olarak kimlik statüsü doksan durumunu sarılmış ve yazı tipi boyutu 24 Bunu silemezsiniz hatırlıyorum Eğer geliştirmek sonra ben sadece bir yerde durum yaptığını koymak o oluyor matematik size biraz fikir vermesi için sıçan vermek stillerinize 800 piksel genişliğinde bir hafta var ve marjlar söyleyen 20 piksel ve auto şimdi ne yapar setleri üst için 0 piksel ve alt ve ardından otomatik veya sol ve sağ bu şekilde herhangi bir içeriği dahilinde yaptığı merkezi konteyner istediğin merkez verilir yani eğer bir web sayfası kompozisyon ortalamak istediğiniz bunu Başka bir elemanın içinde bazı tür elemanı bunu ve nasıl Belirtilen 800 piksel genişliğinde olması 800 piksel genişliğinde ve böylece merkezli ve statü yaptım çünkü konumu kaydırma nerede olursa olsun sol üst köşesinde olacak fixed sayfa her zaman tamam artık JavaScript uygulanan eğlenceli zaman ve yapmak istediğiniz ilk şey olayı kurulur İstediğimiz nesne okul olay dinlemek için öylesine bir taşıma okul pencere nokta yani ne pencere nesnesi alıyorsanız ve onun scroll olay özelliği o olacak Windows kaydırıldığını her zaman biz lastiğin istediğiniz bir işleve eşit bu yüzden her zaman pencere kullanıcı tarafından kaydırılan Fonksiyon biz punchan arayacak konum afedersiniz gidiyor Neden işleyici bunu size Spurs noktalı virgül tarihini kırmak istediğiniz her şeyi isim olabilir makin çift kopyalamak için bu basın kontrolü C tıklayın sonra sağ açık artırmada o hat türü üzerinde Neden eylemci işlev adı temelli açmak yakın Parantez bir çift aşağı gitmek bir küme ayracı açmak küme ayracı kapandığı hatları ChiNext üzerinde size hoş hale getirmek için okula pencere nokta nasıl çalıştığını bu yüzden burada Neden Hitler adında bir işlev kapalı onun olacak yangın dinliyor zaman kullanıcı okulları pencere üst dow bu nedenle bu yüzden işleyicisi işlevi sürekli olarak Windows kaydırılan varlık olarak ateşleme Bu fonksiyon ilk satırda biz hedef istiyorum rap ruh bizim sarılmış kurtardın Aggie dot olsun elemanı belgelemek eşittir Tek denilen tek tırnak yakın parantez ve daha sonra sizin aranızda iki noktalı virgül tek tırnak edeceksin sayfada hedeflemek istediğiniz kimliği koymak böylece sarılmış şimdi rap elemanı var bu bir sonraki satırda javascript bir nesne olarak ama ben satmak içine biraz açıklama alır diyor sayfa içeriği yüksekliği bu yeni bir değişken yaratacak almak ve içeriğin sıkı ve eşit olacak isim sarılı bir nesne offset yüksekliği dot tesis noktalı virgül koymak Sadece sayfalarda rap elemanı hedef Sıkı içerik almak için özellik yüksek ofset senin javascript düşük bu şekilde tam olarak ne kadar içerik pixel sayfada var dikey yatıyor ve olabilir ve herhangi bir tür dinamik sayı yükleyebilirsiniz çünkü Dinamik veri ve farkında olmayabilir sayfa yüklenmeden önce içerik ne kadar yüksek olacağı bu nedenle bu sayı dinamik şimdi bir sonraki satır için gelecek Parcells alır diyor nerede başka bir yorum yerleştirmek için dikey kaydırma konumu artık dikey kaydırma pozisyon almak için bir değişken oluşturmak ve ofset niçin bunun adı olacak ve bu pencere sayfaya eşit olacak Neden pencere nesnesi hedef dikey kaydırma konumunu almak çok ofset Kullanıcı burada sayfa niye ofset özelliği size bildireceğiz edilir de onların bunlar tam olarak sayfayı kaydırma Şimdi tamam okul konumunda sonraki satırı gerçekten sadece zor çizgidir İşte istiyorum o olacak, neden bu çubuğu çağrı Ofset neden eşit artı pencereler onu yüksekliği özelliğinde nokta Eğer pencere hakkında anlamak istiyorsanız şimdi onu yüksekliği var ve aslında ne değeri size verir Dünyaya nereye el sanatları ve get yazın pencere boyutu ve arama ve onu getireceğim bir pencere javascript Ben çağrı yazdığı bir makale tarayıcı boyutları ve burada görebilirsiniz iç ve dış boyutları sadece size pencereyi verir yükseklik ve tarayıcı ve biz şu anda bu öğretici ile uğraşıyoruz biri Bu mavi oklarla böylece iç boyutlar buna işaret ediyor olduğunu ve soğuk pencerede burada bu hakkın bu onun yüksekliği o bize bu değeri veriyor o Buradan ucu ama bu mavi okla bundan Tarayıcı penceresinin sağ burada dibine biz tam olarak anlamaya görmek için alıyoruz değer Ne bu kod küçük parça is getting it görsel olarak iyi bir yoldur göstermek bu nedenle bu yüzden değişken yani bu yüzden değişken Özetle neden ofset artı Onun yüksekliği pencere nokta neden sayfa sadece ne kadar gösteriyor, çünkü Bant kaydırılır ama aynı zamanda pencerelerde hesap var ona yükseklik sayfanın alt hedeflemek istiyorsanız biz ne yapıyoruz ki şehir Yağ, biz bir şey gelmesini istiyorum alt yaş hedeflediğiniz sayfanın alt zaman kaydırma kullanıcı tarafından vurulduğu zaman Sadece birkaç satır olduğunu yapacağım sonraki şey bıraktı yeşil ışık yaktı o bir koşullu deyim ve burada Burada elde değer bu yüzden eğer diyordun Benim hesaplamalar ise neden daha büyük ya da İçerik yüksekliğine eşit i tis hangi içeriği biliyor Bu içinizde tüm içerik yaptım yüksekliği bulunuyor Online utanılacak eğer bu yüzden Y içerik yükseklik menie daha büyük ya da eşit kullanıcının o çevirir temelde neyi diyelim dibe vuran Çok alt kullanıcı kayar ve vurursa Aslında o gün her yerinden gitmek anlamına gelir Bu oluşursa, böylece bir deadhead sipariş Daha sonra ve ancak o zaman koymak istiyorsun daha fazla HTML içeriği sizin Eğer altına almak zaman rap facebook gibi sayfada burada vermek Zaman çizgisi runnin ajax isteği yüzden yazacak konum Hiçbir size burada oran adamlar ajax çağrı daha dinamik veri buraya almak için ve özel bir ajax arama çalıştırma hakkında bir öğretici ihtiyacınız varsa çerçeveler kullanmadan biz bu PHP geliştirmek zorunda JavaScript eğitim videosu bölümünde ya da sadece jQuery kullanabilirsiniz ya da insanlar için JavaScript daha kolay kılan bir başka çerçeve olduğunu Henüz JavaScript programlama nasıl bilmiyorum Şimdi son iki satır basit ve sadece vardır durumunu etkileyen Ben o kaldırabilirsiniz dedi yaptım gibi hangi Bu uygulamayı programlamak sonra sadece bu dışarı yorum yapabilirsiniz İlk orada onlara sahip isteyebilirsin de ama ne görebilir değerler burada yaptığımız bu yüzden kaydırma konum olarak biz durumu sadece yaptığımız hedef olduğunu gibi biz hedef Belgeyi çalıştırdığınızda kendi sarılmış kadar yaptığımız en erken i KODU eleman almak istiyorum Durum böylece bildiğiniz durumunu koyar mı Orada dersi nesne ve biz sadece statü diyebiliriz ki İç HTML özelliği içeriği yüksekliği sayısına eşittir ve o yükseklik ve ardından miktarı kullanıcı kaydırılan olduğunu Bugüne kadar alt kısmına doğru biz var Bir sınıf bir CSS ancak yeni veri koymak Yeni veri aslında, çünkü yeni bir o sarılmış attı ediliyor yaptım Böylece eleman dinamik yeni koyarak nasıl Eğer koyabilirsiniz rap unsuru haline verileri ve katılmak için her türlü hesap verir onların Bu içerik normalde geri geliyor olacak ajax arama veritabanı veya ne olursa olsun daha dinamik veri almak için Sadece ben size dinamik içerik koydun gibi burada verilen statik almak biliyorum geri geliyor PHP veya ajax isteği yakalamak ne olursa olsun olacak ama burada kullanıcı sayfanın alt vurur her zaman gider böylece CSS son şey en koyalım ne zaman bir hedef çatıştılar yeni veri vermek herhangi bir sayfada uh sınıf% yeni baba yaptım Kullanıcı dibe vuruyor tutar gibi ve biz birkaç onları çok zorunda kalacaksın o kadar çok yüksekliği Sadece yapalım yapma çıkacaklar ve edilir Yükseklik 1000 arka plan, mavi ve biz bunu biraz margin-top verin: onlar yüklediğinizde ve alt sadece iki birbirinden ayırmak Şimdi tarayıcı Chrome'da önizleme edeceğiz Şimdi bu çalışmasına izin şimdi sadece eve ne dip izlemek vurdu Biz bin daha fazla piksel değerinde bir veri var bong evden eve gezinmek için Bu coleus küçük şimdi kemik, kemik, kemik, kemik Yorum kadar veri artık tamam var şimdi çalışıyor eksi statik senin nasıl olacağını böylece var Eğer gelen içerik koymak bir gölge gibi burada bir ajax isteği bağlı geri artı rap öğesine eşittir artı, bileşiklerin verileri eşittir İç HTML yukarı o rap öğesi sadece burada eşittir işareti koyarsanız Orada her zaman içinde bunu istemiyorum ki bu iyi misin ediyorum İstediğiniz artı eşit sadece sıçan zaten var verileri tutar Bu nasıl çalışır, böylece eleman ve sadece kendisine daha iyi ekler ve her bir temelde burada hatları birleştiğinde Tüm kullanarak matematiksel mantık aşk sayfa içeriği I alıyorum ve sonra dikey kaydırma konumunu varmaya sayfadaki yani kullanıcının aktör ve daha sonra pencereleri hesaplamak için neden burada kullanmak Onun yüksekliği mahsup Y eklemek için Biz sayfanın en alt kısmına hedefliyorsanız emin olmak için Kullanıcının tarayıcı penceresinde ne olursa olsun pencere boyutları tamam bu yüzden ben bütün bu yeterince iyi açıkladı umut ve bir acemi ve sizi iseniz Burada ne yapıyoruz kavramak başardık bravo sana bu tür ara pirinç, tüm açıklayıcı olması nedeniyle Video altında HP dot com geliştirme mevcut sayfalar HP geliştirmek için bir link koymak Video açıklaması siz buna bir youtube alabilirsiniz tamam böylece ne kadar büyük ölçekli bir çok dinamik Gerçekten odaklı web siteleri JavaScript programlayacaksınız Okul dip yük dinamik içerik nedenle zaman altta kullanıcı okulları dinamik içerik yüklemek ve yükleme ve yükleme ve yükleme tutabilir Bu çimdik ve rafine şimdi sen guys kalmış belki yüklenmesini şeyleri durdurmak için ellerinden daha şartlarını koymak istiyorum sarar hakkında yer o kadar çünkü yararlı buldum ve bir sonraki görüşürüz Öğretici.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax Dinamik sayfa içeriği Javascript kullanarak sayfa içeriği dibine yalnızca kullanıcı kayar görünmesi için öğrenin. Biz işlevselliği oluşturmak için pencere nesnesi ve birkaç DOM özellikleri için onscroll olayı kullanıyor. * object.offsetHeight - * window.pageYOffset - * window.innerHeight. Dinamik web siteleri, sonra pencereyi doldurmak için gereken verileri yüklemek Sayfanın altındaki kullanıcı kaydıran daha yüklemek için bir akıllı bir şekilde olarak hizmet vermektedir. Eğer bir Facebook hesabınız varsa ve size zaman çizelgesi aşağı kaydırma eğer bu etkiyi görebilirsiniz. Facebook yeni Ajax istekleri Ajax ile sihirli sayfaya daha fazla veri yüklemek için sayfa içeriğinin altına gidin her zaman yürütür. Bu şekilde başlangıçta sayfaya çok fazla veri yüklemek zorunda ve Sayfanın altındaki kullanıcı verilirse daha fazla veri görmek için yalnızca dinamik veri yükleme enerjisini harcamak yok. Diğer büyük ölçekli dinamik web siteleri de akıllı modern bir şekilde verimli veritabanı veri render ulaşmak için bu yaklaşımı kullanın.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.6/10

  • 298
    Olumlu
  • 12
    Olumsuz
  • 73
    Yorum
  • 40967
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • CorridorDigital

    CorridorDigi

    17 Mayıs 2010
  • PCDIY

    PCDIY

    16 AĞUSTOS 2013
  • YouplusmeVEVO

    YouplusmeVEV

    4 EYLÜL 2014

ANKET



Bu sayfa işinize yaradı mı?