Wenn man vor dem Problem steht, dass dynamisch generierte CSS background-images verwendet werden, um Bilder auf einer Webseite darzustellen und diese dann auch für Retina Displays gut aussehen sollen, kann man folgendes Skript verwenden. Es überprüft zusätzlich mittels eines Ajax Requests, ob die Bilder vorhanden sind/existieren.
Voraussetzung ist, dass eine Namenskonvention für nicht-Retina Bilder und Retina verwendet wird wie z.B.:
bild1@1x.jpg für nicht-Retina Bilder
und
bild1@2x.jpg für Retina Bilder
<!--Retina Fix for dynamic background images-->
<script type="text/javascript">
function isRetinaDisplay()
{
var dpr = 1;
if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
return dpr >= 2;
}
var notRetinaString = "@1x";
var retinaString = "@2x";
$(document).ready(function() {
//if we have a retina display
if(isRetinaDisplay())
{
//select all elements having background images
var $elementsWithBackground = $('*').filter(function() {
if (this.currentStyle)
return this.currentStyle['backgroundImage'] !== 'none';
else if (window.getComputedStyle)
return document.defaultView.getComputedStyle(this,null)
.getPropertyValue('background-image') !== 'none';
});
//replace their background-image with retina images
$elementsWithBackground.each(function( index ) {
$backGroundImage = $(this).css('backgroundImage');
/*console.log($backGroundImage);*/
//when it is no retina image
if($backGroundImage.indexOf(notRetinaString) !== -1)
{
//replace with retina image
$newBackgroundRetinaImage = $backGroundImage.replace(notRetinaString,retinaString);
$newBackgroundRetinaImageUrl = $newBackgroundRetinaImage.replace('url("','').replace('")','');
//check if retina file exists
var $myThis = this;
$.ajax({
url:$newBackgroundRetinaImageUrl,
type:'HEAD',
cache: true,
success:function() {
console.log($newBackgroundRetinaImage);
$($myThis).css('backgroundImage', $newBackgroundRetinaImage);
},
error:function() {
console.log("no retina image found for: " + $backGroundImage);
}
});
}
});
}
});
</script>