bedingt das laden von Bildern für responsive designs

Ich bin Nachrüstung eines adaptiven Layouts auf eine vorhandene Website. Grundsätzlich ist bei 500 Pixel der Website wechselt zu einer 100% Breite mobile-Stil layout. Normalerweise hätte ich mit ems, aber als ich sagen, ich bin Nachrüstung.

Ich weiß, wie ich zum laden von js und css bedingt ist, aber wie wäre es mit html und Bildern?

Auf der homepage der Seite gibt es ein großes Bild, das den Bildschirm ausfüllt, das brauche ich nicht auf meinem kleinen Bildschirm-layout, so will ich es laden, wenn der browser breiter als 500 Pixel. Problem ist ich kann nicht speichern Sie die <img src="..." /> usw. in js, weil es dynamisch geladen mit php. Der client steuert die Bilder über die wordpress admin.

Irgendwelche Gedanken würde geschätzt werden. Dank

InformationsquelleAutor Geoff | 2013-06-22
  1. 0

    Dieser Arbeit wird für ein oder zwei Dinge. Für die site-wide image laden von Einstellungen, gibt es andere Lösungen.

    Sehen in diesem codepen für ein Beispiel. Ich habe es in den dev-tools, um sicher zu sein, dass das große Bild nicht geladen werden kann.

    So finden Sie die Fenster-Breite mit .width() und speichern Sie in der variable namens (was auch immer Sie wollen) ich nannte es wWidth. Dann eine if-Anweisung. wenn die Fenster-Breite ist größer als 1200px (Es saugt Sie nicht verwenden können, em) --- DANN, laden Sie dieses Bild - andernfalls, lade einfach das kleinere Bild. Um es in den DOM, Sie fügen den html-Code einer vorhandenen div mit .appendTo()

    $(function () {
    var wWidth = $(window).width();
    if (wWidth > 1200) {
        $('<img alt="larger image" src="http://placehold.it/1200/1200"/>').appendTo('.sidebar');
        $('.sidebar a').hide();

    } else {
        $('<img alt="smaller image" src="http://placehold.it/600/600" />').appendTo('.sidebar');
    }
});

    Diesem Beispiel wurde für eine Karte... so, Wenn Sie wollten, um das laden der google map hatte ich einen link, dort konnte drücken, laden die schönere Karte. (wenn dann aber das Fenster war groß, ich würde nicht brauchen, die link - also versteckte ich es mit .hide()

    BEARBEITEN 04/2014

    April 2014, ich habe die Umschaltung der src mit attr (), um auf diese Weise, Sie müssen nur das Bild für Handy, und dann, wenn es einen großen Bildschirm, können Sie das größere Bild der Quelle... aber dann laden Sie 2 Bilder... man könnte also stattdessen laden ein 1px x 1px leeres gif oder so etwas zu starten... und geben Sie eine Breite und Höhe in der Nähe des Verhältnis Sie sich für...

    eine neue CodePen hier:

    HTML

    <div class='image-w thing' id='target01'>
  <!-- standard image for small screens or a blank gif or something -->
  <img src='http://placehold.it/640x640&text=Default-image' alt='' />
</div>

    jQuery

    var imageSizeThing = function() {

  var windowWidth = $(window).width();

  if ( windowWidth < 501 ) {

    //if you start with a blank gif or something
    $('#target01 img').attr('src','http://placehold.it/640x640&text=Default-image');

  } if ( windowWidth > 500 ) {

    $('#target01 img').attr('src','http://placehold.it/1000x1000');

  } if ( windowWidth > 900 ) {

    $('#target01 img').attr('src','http://placehold.it/1800x1800');

  } if ( windowWidth > 1200 ) {

    $('#target01 img').attr('src','http://placehold.it/2400x2400');

  }

};

//call it on DOM ready, and if it makes sense, when the window resizes
$(document).ready(imageSizeThing);

$(window).resize(imageSizeThing);
    • Sollte es vielleicht ein <noscript> fallback?
    • Ich würde sagen Nein. Mit allen js und eckig etc... - javascript ist nur die norm für das Jahr 2015 und auf. - (für mich)
    InformationsquelleAutor sheriffderek
  2. 3

    Ich würde vorschlagen, wenn Sie können, verwenden divs, und legen Sie die Eigenschaft background-image das Bild, das Sie brauchen. Du kannst die Bildschirmgröße mit media queries. Im Grunde...

    HTML
<div id="splash-image"></div>

CSS
#splash-image {
    background-image: url("small-image.png");
}

@media only screen and (min-width: 500px) {
    #splash-image {
        background-image: url("big-image.png");
    }
}
    • Hi, ja das wäre das ideal, aber es ist ein content-verwaltet-Bild. Ich umwickelt habe das Bild zusammen mit php in einigen js-Kontrolle für die browser-Breite (siehe Kommentar oben). Es scheint ok..
    • Dies wird immer noch geladen werden sowohl hintergrund-Bilder.
    InformationsquelleAutor CP510
  3. 1

    Können Sie die Anzeige des Bildes basierend auf media query(aber es lädt sowieso)

    @media screen and ( min-width: 500px ) {
    #image-id {
        display: block;
    }
}

    Oder nicht zu erlauben, das Bild zu laden, auf allen für kleinere Bildschirme, Sie können wickeln Sie das Bild innerhalb eines div(z.B. mit id-img-container) und Folgendes tun:

    if(screen.width>500){
    document.getElementById('img-container').innerHTML = "<img src='image_source_url' />";
}
    • dies nennt man eine bedingte Anzeige anstelle des Ladens
    • yeah!!!! du hast Recht ..freuen uns auf updae die Antwort
    • Danke @ManishJain, ich möchte nicht, das Bild zu laden, auf kleinen Bildschirmen, und das Problem mit der js-Lösung ist, dass das Bild angezeigt wird nach dem Zufallsprinzip mit php. Ich nehme an, Sie können die php-javascript drin? der code für das Bild ist dieses: <img class="<?php echo 'aligncenter size-full '.$imgInfo[$randno][id];?>" src="<?php echo $imgInfo[$randno][src];?>" title="<?php echo $imgInfo[$randno][Titel];?>" alt="<?php echo $imgInfo[$randno][alt];?>" />
    • Dies scheint zu funktionieren <script> if (document.documentElement.clientWidth > 940) { document.write('<img class="<?php echo "ligncenter size-full ".$imgInfo[$randno][id];?>" src="<?php echo $imgInfo[$randno][src];?>" title="<?php echo $imgInfo[$randno][title];?>" alt="<?php echo $imgInfo[$randno][alt];?>" />'); } </script>
    • Nicht, dass scheinen lebensfähig? Natürlich werde ich ändern 940 500
    • Natürlich können Sie php-code in javascript-code(sei es, dass Sie unter best practices oder nicht, ist eine andere Frage), der einzige Punkt im Auge zu behalten, hier ist der php-code wird kompiliert vom server geschickt und im browser danach. So, wenn Ihr browser es Rendern Ihrer Seite, Sie werden sehen, nur javascript und html.
    • Ich sehe, vielen Dank für deine Hilfe, Manish!

    InformationsquelleAutor Manish Jain
  4. 0
    image.load([{

    //Test if media query matches
    test : image.mq('only screen and (max-width: 600px)'),

    //load css and js purely for mobile
    yep: ['/assets/mobile.css', '/assets/mobile.js']

  }]);
    • Ist das ein Modernizr-Methode?
    InformationsquelleAutor Falguni Panchal
  5. 0

    Die Frage ist alt, aber ich hatte das gleiche Problem und dachte an das schreiben meine Lösung für andere, die von Interesse sein könnten.

    Client-Seite nur mit angular js

    Auf der client-Seite, Sie "entdecken" die "Art" der Ressourcen, die geladen werden soll. Zum Beispiel, in der Haupt-app-controller:

    $scope.type = (screen.width > 500) ? 'desktop' : 'mobile';
//or window.navigator

    Dann in Inhalte, die Sie anzeigen wollen, bedingt, fügen Sie die variable

    <img src="images/{{type}}/foo.jpg">

    Hinweis:, dass der Ort, wo Sie Ihre controller-Fragen. Wenn es vor der </body> tag, stellt der browser eine Anfrage vor eckig erweitert die variable. Wenn es ein `, dann wird die variable erweitert wird, bevor der browser stellt die Anfrage

    Server-Seite (PHP)

    Können Sie $_SERVER['HTTP_USER_AGENT']; zu erkennen, ob es ein mobiles Gerät ist und dementsprechend zu handeln.

    Offensichtlich user-Agenten manipuliert werden können aber da der einzige Unterschied ist die Größe des Bildes, den schlimmsten Fall passieren kann, ist, die Sie servieren, ein kleines Bild auf einer großen Leinwand oder Umgekehrt.

    Zum Beispiel:

    $useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
  $type = 'mobile';
} else {
  $type = 'desktop';
}

    Dann dazu dienen, das Bild entsprechend zu $type

    Gemischt

    Können Sie auch mischen die beiden, besonders, wenn du eher daran interessiert sind, die Bildschirmgröße (oder sonstige, das Eigentum der browser) als der tatsächliche user-agent. Ich benutze die folgende Strategie eine Menge.

    1. Erstellen Sie eine landing-page (mit einem splashscreen oder so), setzt ein cookie.

      var type = (screen.width > 500) ? 'desktop' : 'mobile';
document.cookie = 'type=' + type + '; expires=Fri, 31 Dez 2020 00:00:00 UTC; path=/';

    2. Dann leiten Sie den Benutzer auf die Haupt-Seite

    3. Verwenden Sie dann die cookie-server-Seite zur Anzeige der richtigen Bilder

    InformationsquelleAutor Tivie
Schreibe einen Kommentar