Это работает для меня:
$(function() {
$('img[src*="maps.googleapis.com"]').each(
function(){
$(this).hide(); // you may want to replace this with a css rule
var img=($(this).attr('src'));
var xhr = new XMLHttpRequest();
xhr.img=$(this);
xhr.open("GET", img, true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function() {
if(this.readyState == this.DONE) {
if (this.response.byteLength!=8381) this.img.fadeIn();
// Here is a good place to measure the byteLength of
// grey images in your requested size
}
};
xhr.send(null);
});
});
Вы можете добавить правило CSS:
img[src*="maps.googleapis.com"] {display:none;}
Вместо строки:
$(this).hide();
Что гладче.
Обратите внимание, что длина содержимого ответа для серого изображения может варьироваться в зависимости от размеров, указанных в вашем запросе, поэтому обязательно протестируйте и замените this.response.byteLength!=8381
на то, что вы получите для своего конкретного размера.
8381 - правильное значение для 600 x 600 изображений.
Кроме того, Google может изменить отсутствующее изображение или местоположение текста на нем, поэтому необходимо тщательное тестирование.
Метод, который следует рассмотреть, заключается в проверке, является ли response.byteLength на выше данного порогового значения, серые изображения, являющиеся отличными целями для сжатия, обычно намного меньше, чем реальные изображения.