Как я могу клонировать изображение в JavaScript - PullRequest
Новая
       45

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

12 голосов
/ 17 апреля 2011


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

Ответы [ 2 ]

8 голосов
/ 17 апреля 2011

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

 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 я вспоминал, что иногда возвращался к настройке кэша для обновления «каждый раз, когда вы загружаете страницу» (или что-то в этом роде). </p>

3 голосов
/ 18 апреля 2011

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