Question

这对某些人来说很简单，但我甚至不是JavaScript的初学者; （我试过谷歌搜索）我正试图让http://responsiveimg.com/的响应式Img工作。下面的代码总是加载完整大小的测试图像，在桌面和手机浏览器中都是7.8MB。我看到没有像我期望的那样在文件夹中创建新的小图像。

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script src="js/responsiveImg.js"></script>

<script type="text/javascript">
{
    $("#img1").responsiveImg();
}
</script>

<title>Test Document</title>
</head>

<body>
<h1>Test of responsive images program.  #6</h1>

  <div style="width:100%;">
      <img id="img1" src="IMG_0176.jpg" style="max-width:100%;" alt="BIG IMAGE">
  </div>

</body>
</html>

test.html文档，图像和js文件夹都在同一目录下，是my / public_html /
的子目录我怀疑我没有输入$（“＃img1”）。responsiveImg（）;正确。

Answer 1

您没有正确初始化jQuery。您需要使用.ready（）方法或它的简短版本。另外，在<body>标记关闭之前，您可能应该在文档末尾添加脚本标记。

$( document ).ready(function() {
  $("#img1").responsiveImg();
});

这一切看起来似乎有些过分，你可以更容易地创建一个响应式图像CSS类，它将宽度：100％和高度：auto应用于某些图像而不必加载jQuery。

CSS：

.img-responsive {
  width: 100% !important;
  height: auto !important;
}

无法获得响应Img jQuery插件工作

1 个答案: