Как я могу клонировать изображение в javascript


Я пытаюсь клонировать изображение в javascript, бутон без загрузки нового. Обычно новые браузеры загружают изображение один раз, и есть несколько способов снова использовать это изображение. Проблема в том, что когда я тестирую его в IE 6, изображение будет запрашивать новое изображение с сервера.
Кто-нибудь, как некоторая информация о том, как это сделать в старых браузерах?

3 метода, которые не работают: 

<html>
<head>
    <title>My Image Cloning</title>
    <script type="text/javascript">
        sourceImage = new Image();
        sourceImage.src = "myImage.png";

        function cloneImageA () {
            imageA = new Image();
            imageA.src = sourceImage.src;
            document.getElementById("content").appendChild(imageA);
        }

        function cloneImageB () {
            imageB =  sourceImage.cloneNode(true);
            document.getElementById("content").appendChild(imageB);
        }

        function cloneImageC()
        {
            var HTML = '<img src="' + sourceImage.src + '" alt="" />';
            document.getElementById("content").innerHTML += HTML;
        }
    </script>
</head>
<body>
    <div id="controle">
        <button onclick="cloneImageA();">Clone method A</button>
        <button onclick="cloneImageB();">Clone method B</button>
        <button onclick="cloneImageC();">Clone method C</button>
    </div>
    <div id="content">
        Images:<br>
    </div>
</body>

Решение

Добавлены кеш-заголовки на стороне сервера с простым файлом .htaccess в каталоге изображений (ов):
/img/.htaccess

Header unset Pragma
Header set Cache-Control "public, max-age=3600, must-revalidate"

Все приведенные выше методы javascript будут использовать изображение, загруженное, если установлены заголовки кешей.

Ответы

Ответ 1

Afaik поведение браузера по умолчанию - это кеширование изображений. Итак, что-то вроде этого должно работать так, как вы хотите:

 var sourceImage = document.createElement('img'),
     imgContainer = document.getElementById("content");
 sourceImage.src = "[some img url]";
 imgContainer.appendChild(sourceImage);

 function cloneImg(){
     imgContainer.appendChild(sourceImage.cloneNode(true));
 }

Все это довольно сложно, поэтому он должен работать в IE6 тоже (у меня его нет, поэтому не могу это проверить). Посмотрите в действии

Кроме того, вы можете проверить настройку кеша браузера IE6. Я помню из не очень добрых старых дней с IE < 8, что я иногда возвращался к настройке кэша для обновления "каждый раз, когда вы загружаете страницу" (или что-то вроде этого).

Ответ 2

В javascript есть положения для этой сборки. здесь приведен код, измененный от Danny Goodman Javascript Bible 2nd Ed p.498,500 для кэширования/предварительной загрузки изображения,

<img src='/images/someotherimage1.png' id='img1'>
<img src='/images/someotherimage2.png' id='img2'>
<img src='/images/someotherimage3.png' id='img3'>
<script type="text/javascript">
function assignall(numImages, x, y) {
    var img = new Image(x, y);
    img.src = '/images/someimage.png';
    var x;
    for (x=1; x <= numImages; x++) {
        document.getElementById('img'+x).src = img.src;
    }
}

assignall(3); //do it.
</script>

вы всегда можете использовать массив, если у вас есть несколько изображений для работы.

var img = new Array();
function initallimages(numImages, x, y) {
    var x;
    for (x=1; x <= numImages; x++) {
        img['img' + x] = new Image(x,y);
        img['img' + x].src = '/images/someimage.png';
    }
 }
 function assignallimages(numImages) {
    var x;
    for (x=1; x <= numImages; x++) {
        document.getElementById('img' + x).src = img['img'+x]['img' + x].src;
    }
}

initallimages(3, 320, 240);
assignallimages(3);