Угловая 2 - Предварительная загрузка фонового изображения?

У меня есть этот угловой проект, где у меня есть большое фоновое изображение, которое заполняет страницу и простую боковую панель со ссылками, которые при щелчке меняют URL-адрес фона с другим изображением (из cdn). Поскольку эти изображения довольно большие, они берут секунду или два, чтобы загрузить, и это заметно, я хочу добавить предварительный загрузчик, но я не уверен, как это будет сделано в угловом 2.Угловая 2 - Предварительная загрузка фонового изображения?

В моем html у меня есть это:

<section class="fullsizebg image-bg" [ngStyle]="{'background-image': 'url(' + urlImage + ')'}"></section>

переменная urlImage заполняется в конструкторе компонента и боковой панели ссылок изменяет значение его на клик с простой функцией, как так:

generateImage(data: any){ 
    this.urlImage = 'http://example.com/mycdn/'+this.data.url+'.jpg'; 
}

так что URL является на самом деле изменилось мгновенно, но изображение немного загружается. Я бы хотел добавить gip для загрузки или что-то в этом роде, чтобы изображение не изменилось для пользователя и не было так нервным, как сейчас.

источник

2016-09-23 Elaine Marley

Один из способов сделать это было бы использовать Blob, чтобы получить изображение и сохранить его в img компонента, таким образом, у Вас есть свои руки в процессе загрузки, и вы можете добавить загрузки GIF:

@Component({ 
    selector:'loading-image', 
    template:'<img alt="foo" [src]="src"/>' 
}) 
export class ExampleLoadingImage{ 

    public src:string = "http://example.com/yourInitialImage.png"; 

    constructor(private http:Http){} 

    generateImage(data: any): void { 
     this.src = 'http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif'; //Just a random loading gif found on google. 
     this.http.get('http://example.com/mycdn/'+this.data.url+'.jpg') 
     .subscribe(response => { 
      let urlCreator = window.URL; 
      this.src = urlCreator.createObjectURL(response.blob()); 
     }); 
    } 
}

NB: Вы должны ввести свой параметр данных, типизация - это хороший способ обеспечить согласованность над вашим кодом, any следует использовать только как шутник, например Object в Java.

источник

2016-09-23 08:54:01 Supamiu

Я собираюсь попробовать это, но это нарушит мой CSS, чтобы сделать фон размер будет Я не уверен, как это сделать в угловом, я всегда использовал jquery для этого. –

вам следует искать css, чтобы сделать img фиксированным фоном, потому что единственный способ достичь того, что вы хотите, - это сделать это, используя blob. – Supamiu

Хорошо, это более важно, чем проблема с фоном, я увижу, как я это сортирую, попробую ваш подход –

Использование изображения объекта (Plunker Demo ⇗)

tmpImg: HTMLImageElement; // will be used to load the actual image before showing it 

generateImage(data: any){ 
this.urlImage = 'http://example.com/mycdn/'+ 'loading_GIF_url'; // show loading gif 

let loaded =() => { // wait for image to load then replace it with loadingGIF 
    this.urlImage = 'http://example.com/mycdn/' + this.data.url+'.jpg'; 
} 

// background loading logic 
if(this.tmpImg){ 
    this.tmpImg.onload = null; // remove the previous onload event, if registered 
} 
this.tmpImg = new Image(); 
this.tmpImg.onload = loaded; // register the onload event 
this.tmpImg.src = 'http://example.com/mycdn/'+this.data.url+'.jpg'; 
}

источник

2016-09-26 09:28:08

Это решение использует то, что угловое и браузер уже предоставляют. Загрузка изображения выполняется браузером, и вам не нужно возиться ни с какими данными, ни с DOM.

Я проверил это на Chrome 53 и работает безупречно.

Это ваш элемент, который становится его фон изменился:

<div class="yourBackgroundClass" [style.background-image]="'url(' + imgUrl + ')'"></div>

Чтобы упреждающий изображение, мы используем тег изображения, который не показан. Было бы неплохо дополнительно сделать его position: absolute и вывести его из вида или сделать его действительно крошечным, чтобы он не мог помешать вашему фактическому контенту.

<img [src]="imgPreloadUrl" (load)="imgUrl = imgPreloadUrl" hidden>

Через настройки imgPreloadUrl, тем img «s src обновляется с помощью угловых и браузер загружает изображение в невидимую img тега. Как только это будет сделано, onload пожаров, и мы установили imgUrl = imgPreloadUrl. Angular теперь обновляет style.background-image фактического фона, а фоновые изображения переключаются сразу, потому что он уже загружен в скрытое изображение.

Хотя imgUrl !== imgPreloadUrl мы можем показать вертушку для указания загрузки:

<div class="spinner" *ngIf="imgUrl !== imgPreloadUrl"></div>

тест с:

<button (click)="imgPreloadUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg'">test</button>

источник

2016-10-01 09:06:45 j2L4e

Угловая 2 - Предварительная загрузка фонового изображения?

ответ

Смежные вопросы