Wie kann ich Attribute für Höhe und Breite dynamisch setzen? Das Bild wird dynamisch angezeigt (ein zufälliges Foto), aber es ist nicht immer die gleiche Größe. Ich möchte die tatsächlichen Werte für Höhe und Breite in das Tag einfügen, damit wir in einem Web-Performance-Bericht ein wenig besser punkten können (wird nicht angegeben, um die Bildgröße nicht anzugeben). Kann dies über jQuery geschehen?Bildgrößenattribute dynamisch auffüllen?
Der folgende Code verwendet jQuery die width und height alle Bilder in einem <div> Breite a class="images" .Copy diesen Code zu ändern, wie in eine neue Seite ist und verstehen, wie es funktioniert, dann auf Ihr eigenes Projekt anwenden:
<head runat="server">
<title></title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btnMakeImagesSmaller").click(function() {
MakeAllImagesSmaller();
});
function MakeAllImagesSmaller() {
debugger;
var images = $(".images img");
for (var i = 0; i < images.length; i++) {
ChangeSize(images[i], "100px;", "100px");
}
}
function ChangeSize(element, width, height) {
$(element).css("height", height);
$(element).css("width", width);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnMakeImagesSmaller" value="Make Images Smaller" />
<div class="images">
<img src="http://science-all.com/images/wallpapers/fruits-images/fruits-images-4.jpg" />
<img src="http://blogs.extension.iastate.edu/foodsavings/files/2014/06/vegetables-variety.jpg" />
<img src="http://gilowveld.sites.caxton.co.za/wp-content/uploads/sites/97/2016/03/Dairy-products.jpg" />
</div>
</form>
</body>
Können Sie Ihr "* [MCVE] *" HTML und JavaScript/jQuery zeigen? Was hast du probiert, wo steckst du fest, was läuft schief? Wie werden diese Bilder geladen/geladen? Und ja, das kann über jQuery (und natürlich auch über JavaScript) geschehen. –
Wenn Sie nur den Wert für die Höhe und Breite innerhalb des Tags ändern, bringt das keine guten Ergebnisse, wenn Sie ein Bild mit dem Namen hello.jpg der Größe 1024x700 und der Dateigröße 100kb verbinden. Wenn Sie '
' haben, lädt es hello.jpg der Dimensionen 1024x700 und Dateigröße 100kb daher kein Unterschied zu Netzwerkladezeit oder Web-Performance, Unterschied kann kommen, wenn Sie die Größe der Datei auf Ihrem Server auf Ihre Größe ändern können und dann geben Sie als src –
Viney
Ich würde mir keine Sorgen machen. Klingt wie unnötige Aufblähung für beliebige Punkte. Welchen Web-Performance-Bericht verwenden Sie? W3C? –