Здравствуйте, Bаня, Вы писали:
B>Здравствуйте?
B>перерыл форум и не нашёл ответа,
B>есть какая нибудь простая реализация отложенной загрузки изображений (Lazy Load)
B>чтобы картинка загружалась только когда попадает в viewport ?
B>спасибо
Попробуй так:
<picture source="foo" />
class PictureOnDemand : Element {
function paintContent(gfx) {
this.attributes["src"] = this.attributes["source"];
this.attributes["source"] = undefined;
}
}
и CSS:
picture[source] {
prototype: PictureOnDemand;
}
Ну или использовать virtual list — там в DOM только visible элементы.
Здравствуйте, c-smile, Вы писали:
CS>Попробуй так:
не работает, всё равно вызывается для всех элементов по списку
какой самый быстрый способ проверить видимость элемента?
типа этого:
function isInViewport(el){
var rect = el.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
CS>Ну или использовать virtual list — там в DOM только visible элементы.
он не умеет
flow: horizontal-wrap;
Здравствуйте, Bаня, Вы писали:
B>какой самый быстрый способ проверить видимость элемента?
var (cx1,cy1,cx2,cy2) = container.box(#rect,#inner,#view);
var (x1,y1,x2,y2) = child.box(#rect,#border,#view);
if( x2 < cx1 || x1 > cx2 ) return false;
if( y2 < cy1 || y1 > cy2 ) return false;
return true; // it is somehow visible
Здравствуйте, c-smile, Вы писали:
B>>какой самый быстрый способ проверить видимость элемента?
CS>CS> var (cx1,cy1,cx2,cy2) = container.box(#rect,#inner,#view);
CS> var (x1,y1,x2,y2) = child.box(#rect,#border,#view);
CS> if( x2 < cx1 || x1 > cx2 ) return false;
CS> if( y2 < cy1 || y1 > cy2 ) return false;
CS> return true; // it is somehow visible
CS>
спасибо!
то, что нужно
class PictureOnDemand : Element
{
function paintContent(gfx)
{
if( this.attributes["r"] === "0" )
{
if( isInViewport( $(container), this ) )
{
...
this.attributes["r"] = 1;
}
}
}
}
вот такой способ оптимальный или есть вариант проще/быстрее пометить элемент как загруженный ?
Здравствуйте, Bаня, Вы писали:
B>спасибо!
B>то, что нужно
B>вот такой способ оптимальный или есть вариант проще/быстрее пометить элемент как загруженный ?
Можно использовать :visited state flag для этих целей ибо по смыслу это оно:
class PictureOnDemand : Element
{
function paintContent(gfx)
{
if( !this.state.visited )
{
if( isInViewport( $(container), this ) )
{
...
this.state.visited = true;
}
}
}
}
