Постепенно зареждане на съдържание с JavaScript?

[Illusion]

Здравейте. Имам един скрипт, който изкарва над 10 000 изображения в една страница. Въпросните изображения се създават чрез PHP и извършват определено действие, което отнема от няколко секунди до няколко минути, докато зареди изцяло.

Въпроса ми е КАК да направя така, че на страницата, в която се зареждат тези изображения, да се зареждат една след друга без примерно няколко да се опитват да зареждат едновременно, било то с JavaScript или нещо друго?

 

[Hous]

Click

 

[Illusion]

Това няма нищо общо с това, което търся. Става дума за картинки с размери 20x20 и различни цветове, които ми показват резултата от извършеното действие при генерирането им.

Ето какво представлява страницата с тези изображения: http://store.picbg.net/pubpic/F4/85/db203fcf1b18f485.png

Искам да зареждат едно след друго без да се препокриват.

 

[Hous]

За зареждането на картинките една след друга се ползва lazy loading методът на jquery.От php страната не мисля,че има какво да се направи.
Незнам за какво са ти и как работи , но по това което разбрах друго не мога да предложа.

 

[Illusion]

И това май изисква скролиране, за да се покажат изображенията?

Ще обясня малко по-подробно за какво са тези изображения. Чрез зареждане на 1 от изображенията се извличат данни от чужд уебсайт и се внасят в моя таблица. Различните цветове са индикатор за резултата от самото извличане — дали е било успешно, какво е извлечено от всички неща и т.н. Извличането на данни трае между няколко секунди и няколко минути в зависимост от това какъв е обема на данните и това, че всяко нещо се проверява дали вече присъства в съответната таблица при мен.

Проблема ми е, че на една страница изкарвам над 10 000 изображения и те започват веднага да се зареждат, като дори браузъра блокира за момент. Искам просто всяко изображение да се зарежда едно след друго без да натоварва процесора или браузъра излишно, както и да не се зареждат по няколко изображения наведнъж.

 

[Hous]

Много зависи от кода, може в самия php код да се направи последователността, не да праща 10 000 заявки , а 1след друга в цикъл така 10 000 пъти.
Ще забави целия процес разбира се.

Но много зависи как е направен кода...

 

[Illusion]

Добре, хрумна ми друга идея. Вместо изображения ще сложа кода от тях в самата страница и ще направя цикъл, който да извършва извличането на данни за всяко едно нещо обаче искам на самата страница да се показват динамични текстове:

Зареждане на страницата с данните…
Извличане данните на XXXX…
Данните на XXXX бяха извлечени…

Да кажем, че тези три неща се заместват едно след друго и накрая остава само третия ред, след което се минава към следващото нещо, което трябва да бъде извлечено и се показва в отделен div.

Можеш ли да ми дадеш някакъв примерен код за реализиране на това? Срещал съм го на доста места, но никога не съм преглеждал изходния ход, че да имам идея поне какъв плъгин за jQuery да търся или HTML структура с ID-та и т.н.

 

[Hous]

Така обяснено не разбрах за какво ти e jquery.
Просто изливаш данните и след като са готови (записани в db примерно) продължава цикъла.Така показваш всичките текстове, може и в табличка.

Дано съм помогнал , но пак казвам нещо ми се губи така обяснено.

 

[uphero]

Така обяснено не разбрах за какво ти e jquery.
Просто изливаш данните и след като са готови (записани в db примерно) продължава цикъла.Така показваш всичките текстове, може и в табличка.

Дано съм помогнал , но пак казвам нещо ми се губи така обяснено.

Мога да помогна само с съвет
http://www.seoanalyzer.info/game-stats.eu
виж тук как се зареждат боксовете .
Страницата се зарежда на момента но боксовете се зареждат с JS дано си ме разбрал

 

[Illusion]

Да, нещо такова ме интересува, но да зарежда информацията една след друга, а не като този пример, който даде — всичко се зарежда едновременно и някои неща се зареждат по-бързо от други.

 

[Hous]

Да кажем ,че вадиш записите за всеки сайт от дб в while()
при всеки while
ползваш file_get_contents (или както ползваш там) , след като вземеш информацията (тоест вече е заредило сайта и взело квото ти трябва) записваш го в дб,или направо на екрана,и цикъла продължава да се върти ...

while($site=mysql_fetch_array($query)){
$getcontents=file_get_contents($site['url']);
echo $getcontents;
//ili zapis v db
$insert("insert into sometable (return_results,date) values('"$getcontents"','".$date."')");
}

 

[Illusion]

Пробвал съм подобен начин и браузъра ми изчаква цялата страница да зареди преди да ми покаже съдържанието ѝ .

 

[Hous]

Не знам аз като направя един цикъл for ... и му дам да брой до 1000 примерно и виждам как скрула се увеличава след като вече е заредил сайта.

Нямам други идеи.

 

[huanitomuerte]

[css]
.this-img-container{
background:url(loading.png) 50% 50% no-repeat;
}
[/css]

[js]
jQuery(function () {
jQuery('img').hide();
});

jQuery(window).bind('load', function () {
var i = 1;
var imgs = jQuery('img').length;
var int = setInterval(function () {
if (i >= imgs) clearInterval(int);
jQuery('img:hidden').eq(0).fadeIn(300);
i++;
}, 300);
});[/js]

 

[madmax_3]

Аз бих направил нещо подобно:

Ако резултатите се записват в БД, добавяш две полета - status и flag

В началото всички те имат стойност 0.

Скрипта събира информация и записва резултата в полето status.

Страницата която визуализира информацията периодично изпраща запитване, най-добре с AJAX, кои редове имат status>0 и flag==0.
Редовете които отговарят на условията получават flag = 1, а статуса им се изпраща на страницата. Там, с помоща на атрибута "src" на картинката се променя това което се показва.

Може да имаш и някакъв лимит, примерно 500 или 1000 реда за всяка заявка, въпрос на натоварване.

Ако ти трябва помощ, пиши на ЛС.

 

[Katerichok]

Защо не помислиш над вариянта с AJAX. Пращаш 1 заявка изкарва ти квадратчето, след това веднага се прехвръля на следващото и така ако искаш до милион и нагоре.

 

[huanitomuerte]

Мен лично този въпрос ме заинтригува много сериозно
Винаги съм смятал в практиката ми че да заредиш 10 000 имиджа едновременно на една страница (няма връзка с темата защото на колегата са леки 20х20) е 'лудост'.... Но реших да експериментирам с по-големи и по-тежки, с презумцията че принципа е еднакъв....
В този ред на мисли ми хрумна че идеята не е толкова безпочвена ако се изпълни на юзера на интерфейса. Тоест ако се избегнат безконечни заявки с Ajax а се зареди еднократно в рам паметта на сървъра масив само с пътя до файла, което става за секунди... и се прехвърли изпълнението на юзера на компа. Евентуалното бавно зареждане в този случай би могло да бъде само от негов локален проблем - бавна връзка или бавен комп.

Реших да експериментирам за да помогна по темата и ето резултата:
http://huanito.vivacatering.bg/projects/test/demo-2.php

В случая използвам 965 изображения с общо тегло 116 мегабайта, просто нямам повече ))), като ги зареждам през 10. Идеята ми е юзера сам да си ги зарежда от масива който е описан в коментара на страницата, след като премине определена дължина в скролирането. Сложих проверка долу в ляво на страницата за да 'онагледя' идеята )). Най вероятно не е най-добре написания код, но все пак е набързо с цел визуализация на хрумката. Сложих коментари навсякъде колега, който разбира JS би трябвало да се оправи лесно. Сигурен съм че може би някъде в нета има и готови библиотеки, а и фацебоок и гмаил използват като гледам подобен подход. Мисля че има вариант сорса да се зареди и в хтмл коментар и да се разкоментарва след определена дължина в скрола или друго.... варианти много. На мен това ми хрумна и това направих защото в по-горния ми коментар дадох код който е безупречен и работи безотказно автор му е темплейтмонстер.ком но работи добре до 20-50 тумбнейла или имиджи а не за 1000 ))). Както и да е надявам се да съм бил полезен... Успех с проекта!