I am now loading all the images via my template when the image loads
//For example, I will just pass the image url into the tempate when the page renders
%div{class: "img_container <%= answer.image_scale %> <%=answer.show_image%>"}
<% if (media_con.standard_resolution) { %>
%a.fancy{href: "<%= media_con.standard_resolution %>"}
%img{src: "<%=media_con.standard_resolution%>"}
I realize that by doing this (esp if I am loading many images on the page), it causes inefficieny esp apparent on the mobile web.
How can I load images only when they are in view (scrolling), maybe just load a thumbnail image and load the actual image when the view with the image comes to view.
Any advice here is appreciated
There are a number of libraries to achieve this. I've personally used the Lazy Load Plugin for jQuery (demo). Instead of setting <img src> property in the template, you should set a property called data-original to the url of the image:
%img{data-original: "<%=media_con.standard_resolution%>", src="placeholder.png"}
And on the client side code (perhaps in Backbone.view.render) you initialize the library:
$("img[data-original]").lazyload();
Related
I'm using Webpack to compile my Vue production bundle and it loads my images properly because they are defined used <img> tags in my component. I want to load an additional image and show it based on a condition. Since the image isn't set initially in an <img> tag Webpack isn't loading it using file-loader. When I call:
event.currentTarget.children[2].innerHTML = "<img src='../assets/imgs/heart.png' />"
This doesn't work because heart.png was never processed by file-loader, while my previous images were. Any ideas on how to force Webpack to process this image without defining it in HTML my component. My other images (that work) look like this : <img src="data:image/png;base64,iVBORw0KGgo...=="> I understand why my image isn't loading (it's defined in a string), buy any suggestions?
I am trying to make a quiz app and I am using the MEAN stack.
my server will send an object containing details pertaining to the questions - answers, image, question text. I wish to send a link to the ejs file which will then display the image referenced by that link.
I googled around to find some material on this issue but was unable to find any which address this topic.
I tried a few different method and the one below worked:
1) Add the link to the image in the object to be passed by the server
var objCard = {
QuestionText:"What is the indicated sign?",
ImageLink: "/assets/images/dummy.jpg"
}
2) Inside the ejs file use <%= %> from within the img tag
<img src="<%= objCard.ImageLink %>">
I am displaying an image obtained from a database (stored as a long blob) in an img tag using the following method:
<img src="http://localhost:3000/show_image/265" />
The show_image function takes the image data from the database and renders it to the img tag using the send_data method.
When applying Fancybox onto the img tag, the data is displayed as BLOB data not the image..
Can anyone suggest a reason why? Or how I can solve this?
1) You have to apply fancyBox to the links (not the images) and the structure should be like this -
<a class="fancybox" href="big_image"><img src="small_image" /></a>
Example - http://jsfiddle.net/CYCeM/.
Well, it is actually possible to have only images, but then you have to use "data-fancybox-href" attribute to specify the large one - http://jsfiddle.net/6ZSWB/
2) Looks like the script would not be able to guess the content type from your hrefs. You have to either -
a) Create links having extension, e.g., "http://localhost:3000/show_image/265.jpg"
b) Set content type for fancybox, example - $('.fancybox').fancybox(type : 'image');
setting :type => "image/jpg" fixed the issue. I looked up the MIME content types and realised it was incorrectly written.
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.
I have seen that an animated loading gif loads when a an ajax request is being processed. I was wondering how this was done.
For example, there are a lot of images that are loaded from css file. Can I make a loading gif appear until these images are loaded.
Do you mean smth. like this:
http://api.jquery.com/ajaxStart/
or this: How to show loading spinner in jQuery?
You don't really mean Ajax. The images declared in css are loaded by the browser normally.
You need the load event, try this:
1 - Create an element with id yourDivIdWithLoadingElement in your html page which will be shown until all images has been loaded
<div id="yourDivIdWithLoadingElement:>Loading content...</div>
2 - Add this script in your header:
$(window).load(function () {
$('#yourDivIdWithLoadingElement').hide();
});
I dont know if you are using ASP.NET MVC?
If that is the case you can use an #Ajax.ActionLink and put your loading gif in an img tag specifying the id in your actionlink's AjaxOptions in the LoadingElementId.
It would look somehow like this
#Ajax.ActionLink("MyAction", "MyController", new AjaxOptions(){LoadingElementId = "MyGif"})
It will then hide the img gif until the actionlink is triggered. Sometimes you will need to hide it yourself using css, but as far as I remember that is not the case when you are just using an img tag