Блог

Главная - Вопросы по программированию - Совместное использование одного физического изображения между двумя элементами img в HTML

Совместное использование одного физического изображения между двумя элементами img в HTML

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Существует элемент image, как мне использовать этот же элемент img без отправки другого запроса на сервер. Важно отметить, что я не хочу image1.jpg загружено дважды с веб-сервера. Есть идеи?

     function loadCarousels(carouselLoc, carouselId) {

    $("li").find(carouselLoc).each(function (index) {
        var img = this;
        var outer = 0;

        $(carouselId).find("ul").each(function (innerIndex) {
            var liX = document.createElement("li");
            $(this).append(liX);
            var imgInner = document.createElement("img");
            imgInner.src = img.src;
            $(imgInner).appendTo(liX);
            console.log($(this));
        });
    });
}

Вот как я сейчас пытаюсь, но это не работает. это создает отдельное изображение.

Комментарии:

1. Большинство браузеров сохраняют pic в catch, поэтому это не должно быть проблемой

2. Я вижу несколько запросов к веб-серверу, хотя

3. ну, не совсем то, что вам может понадобиться, если вы можете использовать изображение в качестве фона, у вас может быть общий класс css…

4. Где вы видите запрос на это? в HTML?

5. На вкладке сеть в Chrome. эти изображения основаны на URL в базе данных. Это похоже на представление сводных сведений, где мы показываем изображение в двух местах на странице

Ответ №1:

Браузеры уже должны быть довольно агрессивны в отношении кэширования изображений: Chrome часто показывает несколько запросов, но если вы проверяете со второго, обычно все они удовлетворяются использованием кэша.

Если вы хотите выполнить внутреннее кэширование в своем JS-коде, попробуйте кэшировать изображения по URL, как показано ниже:

 // use this as JS cache
var images = {};

function loadCarousels(carouselLoc, carouselId) {

  $("li").find(carouselLoc).each(function (index) {
    var img = this;
    var outer = 0;

    // cache it
    if(!images[img.src]){
     images[img.src] = document.createElement("img");
     // if the user disable the cache, this should prevent another request
     images[img.src].src = img.src; 
    }

    $(carouselId).find("ul").each(function (innerIndex) {
        var liX = document.createElement("li");
        $(this).append(liX);
        // retrieve from the cache
        var imgInner = images[img.src];
        $(imgInner).appendTo(liX);
        console.log($(this));
    });
  });
}