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


Я пытаюсь клонировать изображение в javascript, bud без загрузки нового.
Обычно новые браузеры загружают изображение один раз, и есть несколько способов снова использовать это изображение. Проблема в том, что когда я тестирую его в 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>

решение

добавил cache-headers на стороне сервера с простым .файл htaccess в каталоге изображений:
/НВФ./реврайт

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

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

10
clone copy cross-browser image javascript

2 ответов

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));
 }

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

кроме того, вы можете проверить настройку кэша Вашего браузера IE6. Я помню из не очень хороших старых дней с IE

7

javascript имеет положения для этой сборки. вот код, измененный из Библии Javascript Дэнни Гудмана 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);
3