ASP.NET MVC - Как загрузить изображение асинхронно?

Question

На главной странице моего сайта я хочу показать много продуктов с изображениями довольно большого размера.В настоящее время загрузка страницы занимает так много времени, что фактически истекает время ожидания, и страница не отображается!

В MVC или просто в ASP.NET, как я могу загрузить изображение асинхронно?По сути, я хочу показать подробности продукта и просто показать маленькое изображение загрузки, например, ajaxload.info .пока изображение не загружено.

Я предполагаю, что для этого потребуется некоторый javascript / jQuery ...

Answer 1

<img src="ajax-loader.gif" onload="this.onload=null;this.src='bigimage.png';" />

или если вы предпочитаете ненавязчиво:

<img src="ajax-loader.gif" id="myimg" />

, а затем:

$(function() {
    $('#myimg').load(function() {
        $(this).unbind('load');
        this.src = 'bigimage.png';
    });
});

Answer 2

Прежде всего, стоит проверить, что размеры ваших изображений не слишком велики и просто масштабируются до размеров, подходящих для страницы. Чтобы время загрузки было как можно лучше, изображения должны быть того размера, который вы хотите, чтобы они отображались, 72 dpi и не более. Скорее всего, изображения будут кэшироваться после того, как они будут получены в первый раз, поэтому это будет стоить только один раз.

Я бы хотел вернуть только url к изображению в вашем запросе AJAX. На самом деле, вам не обязательно даже делать это AJAX-запросом. Вы можете отправить массив JavaScript-строк с urls для изображений в нем, а затем создать новый элемент Image (или аналогичный), когда пользователь наводит курсор на определенный заполнитель для изображения.

Надеюсь, это дало вам несколько идей!