I am currently working on a website (http://thibaudjourdan.fr/). In the galleries, when your computer loads an image, it actually loads on the left of my screen and, once fully loaded, displays on the center like it should. I don't like this, is there a way to show some sort of loader instead of the image then show it once it's ready ?
I have seen some solutions on the internet but none seemed to fit my needs or i wouldn't get it to work, can anyone help ?
Thank you.
There is an onload event for images. That can be used to show it when its done
<img src="/path/to/image.jpg" onload="doStuff(this);" />
You can also manage from jQuery
$("img").one("load", function() {
// do stuff
})
Related
I've been searching for an hour on how to nagivate within my Laravel website without refreshing the website (page layout), but I couldn't find a proper solution: one that not just loads the HTML, but actually replaces the content view within the layout.
This is my current dashboard:
So when clicking on a menu item within the blue area, I want the red content area to change without page refresh. What would be a scalable solution for this? I'm trying to follow the DRY (Don't repeat yourself) principle as much as possible.
Oh, please don't mark this topic as a clone of other topics as I've seen most of them but without proper solution. Hope anyone can help me out.
Changing a view without page load means we need to use the ajax techology. Vuejs is a frontend frameework the allows us to acomplish that easily with its axios library
I believe you can get this done by using jQuery load function -
$(function () {
$("#menu_option_a").on("click", function () {
$("#dashboard").load("View1.html");
});
$("#menu_option_b").on("click", function () {
$("#dashboard").load("View2.html");
});
});
Here is my scenario: On my main view I am loading a list of items. Each item has an imageURL property. I am binding an Image component to the ImageURL property. Everything works well, but the image takes an extra second or two to load during which time the Image component is collapsed. Once the image is loaded, the Image component is displayed properly. This creates an undesirable shift on the page as the image is rendered.
The same images are going to be rendered on 2 other views.
What is the best practice to handle this scenario? I tried loading the base 64 string instead of the image url, which worked, but it slowed down the loading of the initial view significantly.
How can I pre-fetch the images and reuse them as I navigate between the views? I was looking at the image-cache module which seems to be addressing the exact scenario, but the documentation is very vague and the only example I found (https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js) did not really address the same scenario. If I understood the code correctly, this is more about the virtual scrolling. In my case, I will have only 2-3 items, so the scrolling is not really a concern.
I would appreciate any advise.
Thank you.
Have you tried this?
https://github.com/VideoSpike/nativescript-web-image-cache
You will likely want to use a community plugin for this. You can also take a look at this:
https://docs.nativescript.org/cookbook/ui/image-cache
So after some research I came up with a solution that works for me. Here is what I did:
When the app start I created a global variable that contained a list of observable objects
then I made the http call to get all the objects and load them into the global variable
In the view I displayed the image as (the image is part of a Repeater item template):
<Image loaded="imageLoaded" />
in the js file I handled the imageLoaded events as:
var imageSource = require("image-source");
function imageLoaded(args) {
var img = args.object;
var bc = img.bindingContext;
if (bc.Loaded) {
img.imageSource = bc.ImageSource;
} else {
imageSource.fromUrl(bc.ImageURL).then(function (iSource) {
img.imageSource = iSource;
bc.set('ImageSource', iSource);
bc.set('Loaded', true);
});
}
}
So, after the initial load I am saving the imageSource as part of the global variable and on every other page I am getting it from there with the fallback of loading it from the URL is the image source is not available for this item.
I know this may raise some concerns about the amount of memory I am using to store the images, but since in my case, I am talking about no more than 2-3 images, I thought that this approach would not cause any memory issues.
I would love to hear any feedback on how to make this approach more efficient or if there is a better approach altogether.
You could use the nativescript-fresco plugin-in. It is an {N} plugin that is wrapping the popular Fresco library for managing images on Android. The plugin exposes functionality like: setting fade-in length, placehdler images, error images (when download is unsuccessful), corner rounding, dinamic sizing via aspect ration etc. for the full list of the advanced attributes you can refer this section of the readme. Also the plugin exposes some useful events that you can use to add custom logic when images are being retrieved from remote source.
In order to use the plugin simply initialize it in the onLaunch event of the application and call the .initialize() function:
var application = require("application");
var fresco = require("nativescript-fresco");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
after that simply place the FrescoDrawee somewhere in your page and set its imageUri:
<Page
xmlns="http://www.nativescript.org/tns.xsd"
xmlns:nativescript-fresco="nativescript-fresco">
<nativescript-fresco:FrescoDrawee width="250" height="250"
imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
</Page>
I have an element in my product list page that I want to hide until the rest of the document has finished loading. (it's a list item with the class "hideme")
The JS solution doesn't work for me, so I'm looking for a scriptaculous method, which should work better in Magento.
Any help would be greatly appreciated.
Thanks!
If you want to make something client-side once the DOM has been loaded, you should try with this:
document.observe("dom:loaded", function() {
// initially hide all containers for tab content
$$('div.tabcontent').invoke('hide');
});
Is more like jQuery(document).ready();
Greetings.
I have searched on this matter but havent been able to find an answer that work for me.
On my website I have one page with a menu and a div. When clicking on a menu link the information in the div changes (ajax). But then Cufón stop working in that div. I have read about Cufon.refresh but can't get it to work. Which code should I use and where do I put it?
My links look like this:test
I have read about Cufon.refresh at this page but I don't understand how to use it: https://github.com/sorccu/cufon/wiki/API
Cufon.refresh also does not work for me. A workaround is to use Cufon.replace again.
Based on the JS you are using, you can edit the trigger function to work like the below and see if that works. Essentially, it will refresh the Cufon call after you have updated the content on that element.
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
{
document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
Cufon.refresh('#ajaxdestination');
}
Good day,
I was wondering if there is a way to make Ajax move on to the next code segment only when all the elements included in the server-side code page are fully loaded. When the retrieved data is text-only there’s no problem, but sometimes there are photos included.
This is part of the code I have been using:
xajx.onreadystatechange = function(){
if(xajx.readyState==4){
document.all.div1.innerHTML = xajx.responseText;
document.all.div1.style.display = “”;
}
}
The thing is that when the response is retrieved (readyState set to 4) and div1 is displayed, the Photo has not been completely loaded yet, so actually the user can see the process of the picture slowly appearing, as he would in any other “normal” case. What I want to do is making div1 available for display only once all the components are fully loaded while meanwhile the system does its stuff in the background. Before Ajax I used hidden iframes like everybody, so I could enclose an onload event handler within the iframe tag (or in an external script), so div1 would appear only after the iframe has fully loaded, photos included.
Any idea?
You can use the 'onload' event on images themselves. You'll need to work out how to attach that event when you are downloading the code dynamically as in your case.