我的页面中有图片，如果我的页面分辨率小于 768 像素，我的 img src 必须更改为 data-tablet如果我的页面分辨率小于 480px，我的 img src 必须更改为 data-mobil或者如果我的分辨率大于 768px img src 必须更改为 data-web或者，如果我的分辨率大于 480，它必须更改为 data-tablet我为它写了一些代码，但我猜条件或语法有问题
$(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>顺便说一下，只有这些代码可以工作
else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}
最佳答案
您需要检查窗口宽度并在调整大小事件上运行您的代码
window.onresize = function(event) {
[your code]
};
关于javascript - 调整页面大小时更改图像源？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42071174/