Отложить загрузку изображений

Question

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

Я вставив некоторые изображения в JavaScript

'<img src="img/grey.png" data-original="'+image.src+'" />'

В Chrome DevTools однако я могу видеть изображения загружаются (до Я даже реализован код, чтобы загрузить их).

Почему это и как я могу избежать их загружается полностью?

У меня работает с отключенным кешем.

Подробнее:

Изображения поступают из RSS-каналы, загруженные Google Feeds API.

feedpointer.load(function (result) { 
    if (!result.error) { 
     $.each(result.feed.entries, function (e, val) { 
      tempContent = $('<div>' + val.content + '</div>'); 
      image = tempContent.find('img'); 
      $('.col_'+id).html('<img src="img/grey.png" data-original="'+image.src+'" />'); 
     }); 
    } 
} 

Это суть. Я вижу с DevTools, что изображение абсолютно нигде на странице. Я не думаю, что Feed API загрузит их, поскольку они содержатся в тексте.

Я считаю, что tempContent = $('<div>' + val.content + '</div>'); может быть оскорбительным кодом для загрузки изображений. Есть ли альтернатива, чтобы пересечь строку как DOM?

Answer 1

Вы можете использовать такую ​​функцию, которая не может быть совершенным, но я думаю, что это достаточно хорошо:

function hideImgSrc(html){ 
    return html.replace(/<img[^>]*?>/gi, function(match){ 
    return match.replace(/\bsrc(\s*=\s*['"])/gi, function(match, after){ 
     return 'data-original' + after; 
    }); 
    }); 
} 

hideImgSrc('<img src = "hello">') --> "<img data-original = "hello">"