我的JS代码包含一些开头为空的图像(没有指定src属性+ display:none).
当添加到具有CSS1兼容性的网站时,我会看到图像图标应该是图像,即使图像不应该显示(显示:无).
知道我怎么能隐藏破碎的图像图标？
注意:我不想加载空图像.我试过宽度和高度= 1px或0px.没用.指定src =""也会给出空图像图标.
编辑:我找到了解决方案:在img定义中添加style ="display:none"(不在CSS中)
我想根据类或id获取图像中的src.防爆.在html页面上有很多<img src="url">但只有一个有类或id:
<img src="url" class="image" or id="image">
如何获得具有特定类或id的正确src属性？请正则表达式不是dom
我将解释你为什么我不想使用dom或其他库,因为我从其他站点获得一个不允许fopen或_file_get_contents或DOM的html页面,但只有Curl可以这样做.当然我有理由不使用像simplehtmldom这样的库,因为有时候不可能获得远程html页面,我应该自己制作一些脚本.
好吧,我有一个包含图像的div,
<div id="image">
<img src="images/medium/1.png" />
</div>
现在我想在点击带有jQuery的链接时将src更改为images/medium/2.png.
我搜索过但找不到这就是我在这里问的原因.我是jQuery的初学者,所以如果你能很好地解释一切,我将不胜感激.
我有一个功能,是div的onclick.我想更改打开的标题旁边的箭头图像,并在点击时关闭div.我写了一个函数,它可以将图像从向下(默认)更改为右边,但它不会改变它.
这是Javascript:
$("#toggle1").click(function () {
$("#content").slideToggle("fast");
if ($("#image1").attr('src', "images/arrow_down.gif")) {
$("#image1").attr(
'src',
$("#image1").attr('src').replace('_down', '_right')
);
} else {
$("#image1").attr(
'src',
$("#image1").attr('src').replace('_right', '_down')
);
}
});
这是HTML:
<div style="text-align:center;"><a class="header" id="toggle1">Location</a>
<img id="image1" src="images/arrow_down.gif" alt="" />
<div id="content">
我有一个图片标签..
<img src="/folder1/folder2/image.jpg">
我需要,使用javascript/query从src标签中删除第一个正斜杠,使图像标签像这样.
<img src="folder1/folder2/image.jpg">
我想对页面上的任何图像执行此操作.
有什么想法吗？
贾斯汀
在我写的小JavaScript中,'img'元素的'src'属性只有在我在图像的相对路径中将'\'更改为'/'时才接受并显示图像.
为什么会这样？
<html>
<body>
<img id="image" src="F:\wallpapers\other\black-and-white-lion-chess-hd-531078.jpg">
//why did '\' work here?
<script>
document.getElementById("image").src="F:/wallpapers/other/clouds_nature_skyscapes.jpg";
//why didn't '\' work here? Why did I have to use '/' ?
</script>
</body>
</html>
我正在努力实现以下目标,并希望有人可以帮助我:
我有一个HTML页面,其中有许多链接通过页面顶部的下拉列表/无序列表显示(使用Bootstrap 3导航栏).这些链接转到托管在内部服务器上的MS Office文档(Word,Excel,PowerPoint).点击链接,我想让它们在同一页面上的iframe中打开,而不是使用单独的页面或下载.
我尝试了以下但这总是打开标准弹出窗口来保存文件或在单独的窗口中打开它.
谁能告诉我这里做错了什么？除了刷新iframe之外还有什么东西？
我的HTML链接下拉列表(只有一个项目):
<li type='disc'><a href='javascript:void' class='navLink' name='test.pptx'>Text</a></li>
我的iframe HTML:
<iframe src="#" width="100%" height="auto" frameborder="0" id="iView" name="iView"></iframe>
我的jQuery:
$(document).on('click', '.navLink', function() {
var fileName = $(this).attr('name');
var fileLocation = 'http://somefilepath/uploads/';
var fileSource = fileLocation + fileName;
$('#iView').prop('src', fileSource);
});
编辑:如果这种方法不起作用是否有办法在HTML网站中嵌入MS Office文档？
蒂姆,非常感谢你提供的任何帮助.
我有两个图像,我需要切换点击图像.
<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png'
data-src='images/prof_arrow1.png' />
当用户单击图像时,src应该获取值,data-swap当您再次单击时,src应该更改为data-src.这应该像切换一样继续发生.任何帮助赞赏.
$("#arrowRotate").click(function() {
var swapImage = $("#arrowGrey").attr("data-swap");
$("#arrowGrey").attr({
'src': swapImage,
id: 'arrowOrange'
});
});
这是我到目前为止的地方.
我需要在我的网页中提高页面速度.我阅读了很多关于使用async和defer attribute提高初始页面速度的内容.所有js脚本都在</body>标签上方定义.请在我的页面中建议如何有效地使用这些属性？
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css">
</head>
<body>
<!--HTML content-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
google analytics script
</body>
</html>
使用LazySizes插件(https://github.com/aFarkas/lazysizes)我正在尝试构建一个图像网格,每个图像都有一个替代版本用于较小的视口.网格(容器)是基于列/行的简单百分比布局.
我不太确定如何声明图像,我只看到更大的版本.我选择使用高分辨率图像,并将容器的最大宽度缩小50%.这是图像的标记样本:
<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw"
data-src="images/grid/image-small.jpg"
data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
alt="" class="lazyload" />
我只需要一个768px的断点.令人困惑的部分是data-sizes属性.我应该在这里声明另一个尺寸,因为图像是高分辨率还是我应该让它们具有全宽？
补充:脚本启动时生成的标记:
<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
data-src="images/grid/image-small.jpg"
data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w"
alt="" class=" lazyloaded"
sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
src="images/grid/image-small.jpg">