javascript - 使用现有代码根据浏览器宽度更改图像网址

Question

我是 JavaScript 新手，所以如果有人问这个问题，请原谅我。

我想让我的 img 标签响应式，所以我使用这个:

<img data-nsrc="<?php 
                 echo wp_get_attachment_image_src( get_post_thumbnail_id()
                                                 , 'small-post'
                                                 , false )[0] ?>"
     data-msrc="<?php 
                 echo wp_get_attachment_image_src( get_post_thumbnail_id()
                                                 , 'mobile-img', false )[0] ?>"
     src="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id()
                                                , 'small-post'
                                                , false )[0] ?>" 
     class="img-right resimgsm">

我将代码更改为使用 img，就像之前使用 div 以及 内联 CSS 和 背景图像.

这是在页面底部运行的脚本:

<script>
jQuery(document).ready(function(){
    jQuery( window ).resize(function(ev) {
      var w=jQuery( window ).width();
      if(w>600){
        jQuery.each(jQuery('.resimgsm'),function(i,el){
            jQuery(el).attr('src',"background-image: url('"+jQuery(el).attr('data-nsrc')+"')")
        })
      }else{
        jQuery.each(jQuery('.resimgsm'),function(i,el){
            jQuery(el).attr('src',"background-image: url('"+jQuery(el).attr('data-msrc')+"')")
        })
      }
    });
    jQuery(window).trigger('resize')
})  
</script>

有人可以指导我如何更改此设置吗？感谢您的帮助。

Answer 1

更改图像源与之前的操作非常相似，您只需要直接图像 URL:

  if(w>600){
    jQuery.each(jQuery('.resimgsm'),function(i,el){
        jQuery(el).attr('src',jQuery(el).attr('data-nsrc'))
    })
  }else{
    jQuery.each(jQuery('.resimgsm'),function(i,el){
        jQuery(el).attr('src', jQuery(el).attr('data-msrc'))
    })
  }

<小时/>

简短说明

您以前的样子可能是这样的:

<div style="background-image: url(imageURLHere.jpg);"></div>

并且您正在修改样式属性或 CSS 属性。

你现在拥有的应该是这样的:

<img src="imageURLHere.jpg">

上面的代码就是这样做的。