Bildquelle beim Ändern der Seitengröße ändern?

Ich habe Bilder in meiner Seite und wenn die Auflösung meiner Seite weniger als 768px muss meine img src mit data-tablet ändern und wenn die Auflösung meiner Seite weniger als 480px muss meine img src mit data-mobil ändern oder wenn meine Auflösung größer als 768px img src muss ändern mit data-web oder wenn meine resulution größer als 480 es mit data-tablet ändern muss ich einen Code für sie geschrieben, aber ich denke, es ist etwas falsch mit der Bedingung oder SyntaxBildquelle beim Ändern der Seitengröße ändern?

$(document).ready(function(){ 
 
    
 
    $(".box img").each(function(){ 
 
     var getWeb = $(this).parents(".box").find("img").attr("data-web"); 
 
     var getTablet = $(this).parents(".box").find("img").attr("data-tablet"); 
 
     var getMobil = $(this).parents(".box").find("img").attr("data-mobil"); 
 
     
 
    if ($(window).width() < 768) { 
 
     $(this).attr("data-src",getTablet); 
 
     }else if ($(window).width() < 480){ 
 
     $(this).attr("data-src",getMobil); 
 
     }else if ($(window).width() > 480){ 
 
      $(this).attr("data-src",getTablet); 
 
     }else if($(window).width() > 768) 
 
     { 
 
     $(this).attr("data-src",getWeb); 
 
     } 
 
    }); 
 
    
 
});

.box{ 
 
    margin:10px; 
 
    float:left; 
 
} 
 
.box img{ 
 
    width:300px; 
 
}

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
    
 
<div class="box"> 
 
    <img data-src="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2017/01/31/09/30/raspberry-2023404_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg" class="lazyload" /> 
 
    </div> 
 
    
 
    
 
    <div class="box"> 
 
    <img data-src="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2014/06/29/12/46/apple-379373_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2016/02/21/00/29/fruit-1213041_960_720.jpg" class="lazyload" /> 
 
    </div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script> 
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
</body> 
 
</html>

ist übrigens gerade diese Code funktioniert

else if ($(window).width() > 480){ 
      $(this).attr("data-src",getTablet); 
     }

and click to see project on codepen

Quelle

2017-02-06 ani_css

Warum nicht nur eine reine CSS-Lösung mit Medienabfragen (versuchen Sie die Größe des HTML-Ergebnisses): https: // jsf iddle.net/45bgz00s/1/ – Hackerman

@Hackerman wird es dynamisch –

Mmmm ... Ihr Code scheint nicht optimal zu sein; das ist, warum Medienabfragen an erster Stelle erstellt wurden ... vergiss .... – Hackerman

Versuchen führen Sie den Code in einer Funktion setzen und sie rufen, wenn das Dokument bereit ist :

$(document).ready(function(){ 

checksize(); 

function checksize(){ 
    $(".box img").each(function(){ 
    var getWeb = $(this).parents(".box").find("img").attr("data-web"); 
    var getTablet = $(this).parents(".box").find("img").attr("data-tablet"); 
    var getMobil = $(this).parents(".box").find("img").attr("data-mobil"); 

    if ($(window).width() < 768) { 
     $(this).attr("data-src",getTablet); 
    }else if ($(window).width() < 480){ 
    $(this).attr("data-src",getMobil); 
    }else if ($(window).width() > 480){ 
     $(this).attr("data-src",getTablet); 
    }else if($(window).width() > 768) 
    { 
    $(this).attr("data-src",getWeb); 
    } 
    }); 
} 

});

Quelle

2017-02-06 15:30:16

Ich denke, das Problem ist nicht über die Funktion Problem ist über die meine Js-Code –

Sie benötigen eine Überprüfung auf Fensterbreite laufen und Ihren Code auf dem Grßenänderungsereignis

window.onresize = function(event) { 
    [your code] 
};

Quelle

2017-02-06 15:20:37 Adam

aber es gleichzeitig für Geräte –

@recruit_man so wollen Sie nur den Code zu schießen, wenn die Seite lädt nicht auf die Größe des Browser-Fensters? – Adam

nein nicht nur Seite laden beide werden besser sein –

Bildquelle beim Ändern der Seitengröße ändern?

Antwort

Verwandte Themen